Advanced Search

Reusable Jquery Toggle

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. The Code
  2.  
  3. <script type="text/javascript">
  4. //<![CDATA[    
  5.    // START ready function
  6.    $(document).ready(function(){
  7.  
  8. 	// TOGGLE SCRIPT
  9. 	$(".hide").hide();
  10.  
  11. 	$("a.toggle").click(function(event){
  12.  
  13. 		if ('[-]' == $(this).text( )) {
  14. 		$(this).text('[+]');	
  15. 		} else {
  16. 		$(this).text('[-]');	
  17. 		}
  18.  
  19. 		$(this).parents(".article").find(".hide").toggle("normal");
  20.  
  21. 		// Stop the link click from doing its normal thing
  22. 		return false;
  23. 	}); // END TOGGLE
  24.  
  25.    }); // END ready function
  26.  //]]>
  27.  
  28. </script>
  29.  
  30.  
  31.  
  32.  
  33.  
  34.  
  35.  
  36. This markup:
  37.  
  38.  
  39. <div class="article">
  40.    <a class="toggle" href="#">Toggle 1 »</a>
  41.    <div class="hide">
  42.       <p>Hidden toggle content 1.</p>
  43.    </div>
  44. </div>
  45.  
  46. <div class="article">
  47.    <a class="toggle" href="#">Toggle 2  »</a>
  48.    <div class="hide">
  49.       <p>Hidden toggle content 2.</p>
  50.    </div>
  51. </div>
  52.  
  53. <div class="article">
  54.    <a class="toggle" href="#">Toggle 3  »</a>
  55.    <div class="hide">
  56.       <p>Hidden toggle content 3.</p>
  57.    </div>
  58. </div>

URL: http://jendrodesign.com/blog/2009/07/reusable-jquery-toggle/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.