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)

Mcglynn

Is nextUntil a possibility? – Mcglynn

Unfortunately for your case, the accordion source code uses .next() from the header everywhere, so without modifying the source or your markup, you really can't do this. – Abell

Answer 1

• demo: https://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! ;)

Skeen

Outstanding, exactly what I wanted. Out of interest, what benefits does the accordion offer (if any)? Is it just an easier syntax for different style variations? – Mcglynn

IMHO i personally suggest to use jQuery UI and it's accordion plugin only if you need to build a complex Application where you may need to have an easy way to access Options, Events, Methods and of course different Theming style on the fly! Less Code Is Better when possible! ;) – Skeen

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>

Bonehead

This is definitely one possible solution (and will validate), but I would prefer to keep the semantically correct multiple dd's and find a jQuery solution if possible... – Mcglynn

Ah, then by your comment it sounds like you want to extend accordion to do nextUntil( options.header ) instead of next(). Hm, hopefully someone w/ more experience w/ extending will answer. – Bonehead

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)

Southport