Super Simple jQuery Accordion

Monday, 15 Jun 2009

After struggling to get jQuery.UI accordion working in a Drupal site, I gave up and decided to code my own little accordion. As it turns out, it was incredibly simple. All you need is jQuery.

HTML Sample:

<br /><div id="accordion">
<br />  <h3>Section 1</h3>
<br />  <div>
<br />    <p>
<br />      Mauris mauris ante, blandit et, ultrices a, 
<br />      suscipit eget, quam. 
<br />    </p>
<br />  </div>
<br />  <h3>Section 2</h3>
<br />  <div>
<br />    <p>
<br />      Sed non urna. Donec et ante. Phasellus eu 
<br />      ligula. Vestibulum sit amet
<br />    </p>
<br />  </div>
<br />  <h3>Section 3</h3>
<br />  <div>
<br />    <p>
<br />      Nam enim risus, molestie et, porta ac, 
<br />      aliquam ac, risus. Quisque 		  
<br />    </p>
<br />  </div>
<br /></div>
<br />

JavaScript (jQuery) Sample:

<br />  <script type='text/javascript'>
<br />    $(document).ready(function() {
<br />      // accordion effect
<br />      $("#accordion div").hide();
<br />      $("#accordion div:first").show();
<br />      $("#accordion div:first").addClass("active");
<br />      $("#accordion h3").click(function() {
<br />        $("#accordion div.active").hide();
<br />        $(this).next().show("fast");
<br />        $(this).next().addClass("active");
<br />        return false;
<br />      });
<br />    });
<br />  </script>
<br />