Advanced Search

Simple Accordion

/ Published in: jQuery
Save to your folder(s)
With persistent panel and active class.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. HTML
  2. ==========
  3.  
  4. <div id="menu">
  5.   <ul>
  6.     <li>
  7.       <h3>title</h3>
  8.       <div class="contents"></div>
  9.     </li>
  10.     <li>
  11.       <h3>title</h3>
  12.       <div class="contents"></div>
  13.     </li>
  14.   </ul>
  15. </div>
  16.  
  17. JS
  18. ==========
  19.  
  20. /** Accordion
  21. ********************/
  22.  
  23. // close all except first 1	
  24. $("#menu li:gt(0) .contents").hide();
  25. $("#menu li:eq(0) h3").addClass('selected');	
  26.  
  27. // add hover class for ie6
  28. $("#menu h3").hover(function(){
  29. 	$(this).addClass('hover');
  30. },
  31. function(){
  32. 	$(this).removeClass('hover');
  33. });	
  34.  
  35. // open/close menu
  36. $("#menu h3").click(function(event) {
  37. 	event.preventDefault();		
  38.  
  39. 	if($(this).next().is(':hidden')) {			
  40. 		$('#menu .contents')
  41. 			.slideUp('fast')
  42. 			.prev().removeClass('selected');			
  43. 		$(this).next()
  44. 			.slideDown('fast')
  45. 			.end().addClass('selected');
  46. 	}
  47.  
  48. 	return false;
  49. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.