Advanced Search

Accordion Content Expander

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.