toggle function


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

toggle function for showing/hiding LI elements that slide up/down into the UL title box


Copy this code and paste it in your HTML
  1. /* EXAMPLE
  2.  
  3. <ul id="gateType">
  4. <div class="title">Title OF<a id="gth" href="#" title="hide">HIDE</a></div>
  5. <li>blah</li>
  6. <li>blah</li>
  7. <li>blah</li>
  8. </ul>
  9.  
  10. */
  11.  
  12. (function( $ ){
  13. $.fn.showhide = function() {
  14.  
  15. var $this = $(this);
  16. var $parent = $this.closest('ul');
  17.  
  18. $this.toggle(function() {
  19. $this.text("SHOW");
  20. $parent.find('li').slideUp();
  21. return false;
  22. }, function() {
  23. $this.text("HIDE");
  24. $parent.find('li').slideDown();
  25. return false;
  26. });
  27.  
  28. };
  29. })( jQuery );
  30.  
  31.  
  32.  
  33. /*
  34.  
  35. USE:
  36.  
  37. $("#gth").showhide();
  38.  
  39. */

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.