Advanced Search

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

Expand | Embed | Plain Text

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.