Problem with nesting

[john-cheesman]

When nesting one accordion in an accordion panel, extra accordion header buttons are being added to the nested panels.

Source:

<section class="js-accordion" data-accordion-prefix-classes="accordion" data-accordion-multiselectable="none">
    <h2 class="js-accordion__header" data-accordion-opened="true">Header</h2>
    <div class="js-accordion__panel">
        <p>content</p>

        <section class="js-accordion" data-accordion-prefix-classes="accordion" data-accordion-multiselectable="none">
            <h2 class="js-accordion__header" data-accordion-opened="true">Header</h2>
            <div class="js-accordion__panel">
                <p>content</p>
            </div>

            <h2 class="js-accordion__header">Header</h2>
            <div class="js-accordion__panel">
                <p>content</p>
            </div>
        </section>
    </div>
</section>

DOM:

<section aria-multiselectable="false" role="tablist" class="accordion" data-accordion-prefix-classes="accordion" data-accordion-multiselectable="none">
    <button aria-selected="true" id="accordion1_tab1" role="tab" aria-expanded="true" aria-controls="accordion1_panel1" class="js-accordion__header accordion__header">Header</button>
    <div aria-hidden="false" id="accordion1_panel1" role="tabpanel" aria-labelledby="accordion1_tab1" class="js-accordion__panel accordion__panel">
        <h2 tabindex="0" class="accordion__title" data-accordion-opened="true">Header</h2>
        <p>content</p>

        <section aria-multiselectable="false" role="tablist" class="accordion" data-accordion-prefix-classes="accordion" data-accordion-multiselectable="none">
            <button tabindex="-1" aria-selected="false" id="accordion2_tab1" role="tab" aria-expanded="false" aria-controls="accordion2_panel1" class="js-accordion__header accordion__header">Header</button>
            <div aria-hidden="true" id="accordion2_panel1" role="tabpanel" aria-labelledby="accordion2_tab1" class="js-accordion__panel accordion__panel">
                <button aria-selected="false" tabindex="0" id="accordion1_tab2" role="tab" aria-expanded="true" aria-controls="accordion1_panel2" class="accordion__header accordion__title">Header</button>
                <h2 tabindex="0" class="accordion__title" data-accordion-opened="true">Header</h2>
                <p>content</p>
            </div>

            <button tabindex="-1" aria-selected="false" id="accordion2_tab2" role="tab" aria-expanded="false" aria-controls="accordion2_panel2" class="js-accordion__header accordion__header">Header</button>
            <div aria-hidden="true" id="accordion2_panel2" role="tabpanel" aria-labelledby="accordion2_tab2" class="js-accordion__panel accordion__panel">
                <button aria-selected="false" tabindex="0" id="accordion1_tab3" role="tab" aria-expanded="false" aria-controls="accordion1_panel3" class="accordion__header accordion__title">Header</button>
                <h2 tabindex="0" class="accordion__title">Header</h2>
                <p>content</p>
            </div>
        </section>
    </div>
</section>

[nico3333fr]

Hi @john-cheesman ,

this must be a too powerful selector. It seems to work well if you replace the line 15

$accordions_headers = $this.find( ".js-accordion__header" ), by $accordions_headers = $this.children( ".js-accordion__header" ),

Could you test quickly and confirm ? If it is okay, I'll commit the fix.

Thanks a lot for pointing out this issue.

[john-cheesman]

I've tried that and it's working as expected now, thanks.

[nico3333fr]

Fine, I commit the fix asap. Thanks a lot for your help :+1:

[john-cheesman]

Thanks

[nico3333fr]

I hope you won't mind, I've mentionned your help on the project page: https://a11y.nicolas-hoffmann.net/accordion/

[john-cheesman]

That's cool, glad to help :+1: