Super Simple jQuery Accordion

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 />


Is there a simpler way? Probably but this is pretty quick and easy too! ;)

Demo:





Section 1




Mauris mauris ante, blandit et, ultrices a,
suscipit eget, quam.



Section 2




Sed non urna. Donec et ante. Phasellus eu
ligula. Vestibulum sit amet



Section 3




Nam enim risus, molestie et, porta ac,
aliquam ac, risus. Quisque