Simple jQuery Accordion

by Alexey Demin

HTML

<dl id="accordion">
    
    <dt><a href="">This is what you would click on to show the content</a></dt>
    <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor.</dd>
    
    <dt><a href="">Another Line Item</a></dt>
    <dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris si.</dd>
    
    <dt><a href="">And Another</a></dt>
    <dd>Lorem ipsum dolor sit amet, consectetuer adipi.</dd>
    
</dl>

CSS

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

JavaScript

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