jQuery Accordion definition list with multiple description items

Question

I can't seem to use jQuery Accordions with definition lists that have multiple desciption items (dd). The author's examples have only single dd items.

In the example below B2, B3 & C2 show onLoad, rather than hide like A1, B1 & C1 as I would prefer.

How would I achieve this?

jQuery('dl').accordion({ 
    event: 'click',     
    active: false, 
    animated: "bounceslide", 
    header: "dt" 
});​

<dl>

    <dt>A</dt>
    <dd>A1</dd>

    <dt>B</dt>
    <dd>B1</dd>
    <dd>B2</dd>
    <dd>B3</dd>

    <dt>C</dt>
    <dd>C1</dd>
    <dd>C2</dd>

</dl>

(Live jsFiddle version)

Answer 1

• demo: http://so.lucafilosofi.com/jquery-accordion-definition-list-with-multiple-description-items

$(function () {
    $('dt').on('click', function (e) {
        e.preventDefault();
        $(this).parent('dl').children('dd:visible').slideUp('slow');
        $(this).nextUntil('dt').filter(':not(:visible)').slideDown('slow');
    });
});

NOTE:

If you want multiple sections

open at once, don't use an accordion

• An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this: REFERENCE: http://jqueryui.com/demos/accordion/

hope this help! ;)

Answer 2

The author claims the content needs to be adjacent to its header. Inspect Element shows that it ignores the extra <dd>'s:

<dt tabindex="0" aria-expanded="true" role="tab" class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top"><span class="ui-icon ui-icon-triangle-1-s"></span>B</dt>
<dd role="tabpanel" style="height: 20px; display: block; overflow: visible; padding-top: 0px; padding-bottom: 0px;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">B1</dd>
<dd>B2</dd>
<dd>B3</dd>

If you have control over the HTML rendering, you can nest <p> elements inside the <dd>'s:

<dt>B</dt>
<dd>
    <p>B1</p>
    <p>B2</p>
    <p>B3</p>
</dd>

Answer 3

Just to complement aSeptik's simple solution: If you want every item except the first one to be closed on page load, add this: $('dd:not(:first-of-type)').hide();

I would suggest using a class on Accordions, so you can still have unjqueryfized definition lists in your markup. Like this:

$('.accordion dd:not(:first-of-type)').hide();
$('.accordion dt').on('click', function (e) {
    e.preventDefault();
    $(this).parent('dl.accordion').children('dd:visible').slideUp('slow');
    $(this).nextUntil('dt').filter(':not(:visible)').slideDown('slow');
});

(and then using <dl class="accordion"><dt>... in your HTML)