Jquery Accordion

This Comment will be submitted for moderation and will not be accessible to other users until it has been approved.


Following code demonstrates a custom jquery accordion that can be created without using any fancy jquery accordion library:

HTML code that would have the accordion working.

<dl id="accordion">
<dt><a href="">Click</a></dt>
<dd>Content in Detail for Click1</dd>
 
<dt><a href="">Another Click</a></dt>
<dd>Content in Detail for Click 2. </dd>
 
<dt><a href="">And Another Click</a></dt>
<dd>Content in Detail for Click 3. Content in Detail for Click 3.</dd>
 
</dl>

Style to be loaded in the header of the page:

#accordion { margin: 0; padding: 0; }
#accordion dd { margin: 0 0 5px 0; padding: 0; }

Jquery code to be loaded in the header of the page to get our custom accordion working. We hide all the dd in #accordion upon page load. On click, we jquery slideup() the content and slidedown() the next content, so that only 1 content remains open.

$(document).ready(function($) {
       $('#accordion dd').hide();
       $('#accordion dt a').click(function(){
               $('#accordion dd').slideUp();
               $(this).parent().next().slideDown();
               return false;
       });
});





Post Comment

  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. Beside the tag style "<foo>" it is also possible to use "[foo]". PHP source code can also be enclosed in <?php ... ?> or <% ... %>.