Posted By

andyweb on 07/08/10


Tagged


Versions (?)

Simple Accordion


 / Published in: jQuery
 

With persistent panel and active class.

  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  

You need to login to post a comment.