Reusable Jquery Toggle


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



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.