Jquery – Show One Paragraph and Hide Anothers

Implemented jQuery Show/Hide functionality. By default, first paragraph will show.

When you will click on Next button then first paragraph will hide and next paragraph will show.

Used jQuery’s eq(index) selector to select a single element or within a looping construct such as each() can select multiple elements.

The each() method iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0.

Demo – Show/Hide Paragraphs

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
	$("input#dice_score").css("cursor", "pointer");		
	$(".help p").each(function() {
		if($(this).html().replace(/\s|&nbsp;/g, '').length == 0){			
			$(this).remove();							
		}	
	});	
	var current_page = 0;
	$(".help p").hide();	
	$("#show_next_button").show();	
	$(".help p:not(:empty)").eq(0).show();  
	var total_paragraphs = $(".help p:not(:empty)").length;  
	$("input#dice_score").click(function(){
		$(".help p:not(:empty)").eq(current_page).hide().each(function(){
			current_page = (current_page + 1) % total_paragraphs;					
			$(".help p:not(:empty)").eq(current_page).show();											
			if(current_page == 0){
				$(".help p").html("<br><div align='center'style='background-color:#CCCCCC;'><b style='text-align:center;'>Finished</p></div></p>");				
				$("#show_next_button").hide();
			}
		});		
	});	
});
</script>
<div class="help" style="background-color:#CCCCCC;">
   <br>
    <p style="background-color:#CCCCCC;"><span>jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content, and button colors, called a "swatch". The framework comes with five defined themes which can be used readily, removed, or overwritten.</span></p>
    <p style="display: none;background-color:#CCCCCC;"><span>The ThemeRoller allows users to create their own theme through an easy to use drag and drop interface. By default, ThemeRoller offers three swatches (a, b and c). You can use the offered default colors, the Adobe kuler colors, or create your own. You will create your theme by dragging the chosen color onto the chosen element in the swatch of your choice.</span></p>
    <p style="display: none;background-color:#CCCCCC;"><span>jQuery's ajax capabilities can be especially useful when dealing with forms. There are several advantages, which can range from serialization, to simple client-side validation (e.g. "Sorry, that username is taken"), to prefilters (explained below), and even more!</span></p>
    <p style="display: none;background-color:#CCCCCC;"><span>Serializing form inputs in jQuery is extremely easy. Two methods come supported natively: .serialize() and .serializeArray(). While the names are fairly self-explanatory, there are many advantages to using them.</span></p>
    <p style="display: none;background-color:#CCCCCC;"><span>The .serialize() method serializes a form's data into a query string. For the element's value to be serialized, it must have a name attribute. Please note that values from inputs with a type of checkbox or radio are included only if they are checked.</span></p>
    <p style="display: none;background-color:#CCCCCC;"><span>The theme system separates color and texture from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and to be mixed, matched, and combined to achieve a wide range of visual effects.</span></p>
<br><br>
<span id="show_next_button"><input type="button" value="Next »" id="dice_score" class="nextbttn" style="cursor: pointer; float:right;"></span>
</div>
SHARE:

Leave a Reply

Your email address will not be published. Required fields are marked *

*