http://icyarena.com
http://icyarena.com
Jquery Toogle() for 3 div or more
  Posted by : Color Picker     Date : 05 February       Leave a comment
Normally we use Jquery Toogle() function for showing and hiding two div i.e while showing one another is hidden.To do so for 3 div example for repeat button(repeat off,repeat one,repeat all) follow my ticks...

Jquery Toogle() for 3 div

1
Make a HTML file and copy following code.
  • It contains jquery file some css and java script.
  • save your HTML file and check.
    <html>
    <title>jquery toogle() for 3 div or more</title> 
    <body>
    <style>
    	.repeat button{
    		display:none;
    	}
    	#repeat1{
    		display:block;
    	}
    </style>
    <script src="/jquery.1.11.1.js"></script>
    <!--- or <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> --->									
    <script type="text/javascript">
    	$(document).ready(function(){
    		$(".repeat button").click(function(){//click function
    			var rid=$(this).attr("showing-id");//getting id nunmer that we want to show
    			$(".repeat button").hide();//hide all button
    			$("#repeat"+rid).show();//show desired button
    		});
    	});
    </script>
    <div class="repeat">
    	<button id="repeat1" showing-id="2">Repeat</button>
    	<button id="repeat2" showing-id="3">Repeat one</button>
    	<button id="repeat3" showing-id="1">Repeat all</button>
    </div>
    </body>
    </html>
    Preview on Browser
    jquery toogle() for 3 div or more

Jquery Toogle() for more div

1
Make a HTML file and copy above code.
  • save your HTML file and check.
    <html>
    <title>jquery toogle() for 3 div or more</title> 
    <body>
    <style>
    	.repeat button{
    		display:none;
    	}
    	#repeat1{
    		display:block;
    	}
    </style>
    <script src="/jquery.1.11.1.js"></script>
    <!--- or <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> --->									
    <script type="text/javascript">
    	$(document).ready(function(){
    		$(".repeat button").click(function(){//click function
    			var rid=$(this).attr("showing-id");//getting id nunmer that we want to show
    			$(".repeat button").hide();//hide all button
    			$("#repeat"+rid).show();//show desired button
    		});
    	});
    </script>
    <div class="repeat">
    	<button id="repeat1" showing-id="2">Repeat</button>
    	<button id="repeat2" showing-id="3">Repeat one</button>
    	<button id="repeat3" showing-id="4">Repeat all</button>
    	<button id="repeat4" showing-id="5">Repeat this</button>
    	<button id="repeat5" showing-id="1">Repeat off</button>
    </div>
    </body>
    </html>
2
How does this code work ?
  • look at css code and java script
  • By css method we hide every div accept one.
  • every div has it's own id and an attribute 'showing-id' i.e which id we want to show when click on this div.
  • in java script we use a click function.In function first we collect 'showing-id' then hide all div accept one that has id number related to 'showing-id'.

Tips

  • You may comment or ask question about this article.Please feel free to contact us.
  • Dont't forget to share this article with your friends.Click here to share.
<
Subscribe to get Latest Update
Other Networks
Related articles
Random articles