Posted By

delineo on 12/03/10


Tagged

accordion


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

luman
virendrakryadav
czehner


Accordion Content Expander


 / Published in: jQuery
 

  1. <style type="text/css">
  2.  
  3. .expander { display:block; width:400px; height:24px; padding:5px 0px 0px 33px; margin:10px 0px 10px 0px; cursor:pointer; font-weight:bold; color:#000066; }
  4. .expanderHalfClosed { background:url(images/back_expanders_half_closed.jpg) no-repeat; }
  5. .expanderHalfOpen { background:url(images/back_expanders_half_open.jpg) no-repeat; }
  6. .expanderFull { display:block; width:521px; height:24px; padding:5px 0px 0px 33px; margin:10px 0px 10px 0px; cursor:pointer; font-weight:bold; color:#000066; }
  7. .expanderFullClosed { background:url(images/back_expanders_full_closed.jpg) no-repeat; }
  8. .expanderFullOpen { background:url(images/back_expanders_full_open.jpg) no-repeat; }
  9. .hide { display:none; }
  10.  
  11. </style>
  12.  
  13. <script type="text/javascript">
  14.  
  15. // Content expander jQuery
  16. $(document).ready(function() {
  17.  
  18. $("div.expander").click(function() {
  19. if ($(this).hasClass("expanderHalfClosed")) {
  20. $(this).removeClass("expanderHalfClosed");
  21. $(this).addClass("expanderHalfOpen");
  22. }
  23. else {
  24. $(this).removeClass("expanderHalfOpen");
  25. $(this).addClass("expanderHalfClosed");
  26. }
  27. });
  28.  
  29. $("div.expanderFull").click(function() {
  30. if ($(this).hasClass("expanderFullClosed")) {
  31. $(this).removeClass("expanderFullClosed");
  32. $(this).addClass("expanderFullOpen");
  33. }
  34. else {
  35. $(this).removeClass("expanderFullOpen");
  36. $(this).addClass("expanderFullClosed");
  37. }
  38. });
  39.  
  40. });
  41.  
  42. </script>
  43.  
  44. <div onclick="$('#number1').toggle();" class='expanderFull expanderFullClosed'>Legal</div>
  45. <div id='number1' class='hide'>
  46. CONTENT</div>
  47.  
  48. <div onclick="$('#number2').toggle();" class='expanderFull expanderFullClosed'>Tax</div>
  49. <div id='number2' class='hide'>
  50. CONTENT</div>
  51.  
  52. <div onclick="$('#number3').toggle();" class='expander expanderHalfClosed'>Administration</div>
  53. <div id='number3' class='hide'>
  54. CONTENT</div>

Report this snippet  

You need to login to post a comment.