Question : Jquery hide and display elements

Ok, I have a confusion here.

When you press next, the script is suppose to display the content inside step-1 or step-2 or step-3, depends which one is currently displaying.

When I press next, it displays section 2 but  before pressing next again it goes right away to display section 3. The script does not wait for me to press next a second time when I am already in section 3. Could someone please explain me why this is occurring. I am trying to go each section individually not simultaneously.

many thanks in advance.
Attachments:
 
examples.html (1 KB)  (File Type Details) 
example
 

Answer : Jquery hide and display elements

You may use :


            $('ul li.next-button').click(function(event) {
                  event.preventDefault(); // we don't want the click on the anchor change the current page/url
                  var numberOfSections = $(".foreigndiv").length; // how many section do we have ?
                  var current = $(".foreigndiv:visible").index(".foreigndiv"); // get index of the current visible section
                  var nextone = (current + 1 >= numberOfSections)?0:(current + 1); // what is the next one ? If the current is the latest start from the first (section 1)
                  $(".foreigndiv").eq(current).fadeOut('fast');
                  $(".foreigndiv").eq(nextone).fadeIn('slow');
            });

http://api.jquery.com/event.preventDefault/
http://api.jquery.com/visible-selector/
http://api.jquery.com/index/

test page :

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script language="javascript">
	$(document).ready(function () {                  
		$('ul li.next-button').click(function(event) {
			event.preventDefault();
			var numberOfSections = $(".foreigndiv").length;
			var current = $(".foreigndiv:visible").index(".foreigndiv");
			var nextone = (current + 1 >= numberOfSections)?0:(current + 1);
			$(".foreigndiv").eq(current).fadeOut('fast');
			$(".foreigndiv").eq(nextone).fadeIn('slow');
		});
	})
</script>
</head>
<body>
<div id="cars" class="mytopdiv">
    <div id="step-1" class="foreigndiv">
	    <div class="headers">
		    <h2 class="name-photo">Section 1</h2>
    	</div>
	    <div id="name-of-form">  
		    <form action="">  
    			<fieldset>  
    				<label id="name_label" for="name_label"></label>  
    				<input type="text" class="text-input" value="" size="30" id="name-input" name="name">
    			</fieldset>
    		</form>
    	</div>
    </div>
    <div id="step-2" class="foreigndiv" style="display:none;">
	    <div class="headers">
    		<h2 class="cars brands">Section 2</h2>
	    </div>
    </div>
	<div id="step-3" class="foreigndiv" style="display:none;">
	    <div class="headers">
    		<h2 class="brands">Section 3</h2>
	    </div>
    </div>
    <div>
        <ul>
            <li class="back-button"><a href="#">Back</a></li>
            <li class="next-button"><a href="#">Next</a></li>
        </ul>      
    </div>
</div>
</body>
</html>
Random Solutions  
 
programming4us programming4us