Menu icon Foundation
How to nest accordions in Foundation 5

Hi, I'm trying to nest accordions in Foundation 5, but it doesn't seem to work. When I click one of the nested accordions it closes the top level accordion.

 <dl class="accordion" data-accordion>
        <dd class="accordion-navigation">
            <a href="#paneltest">Accordion 1</a>

            <div id="paneltest" class="content active">
                <dl class="accordion2" data-accordion>
                    <dd class="accordion-navigation">
                        <a href="#panel1b">Accordion 1</a>

                        <div id="panel1b" class="content">
                            Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                    </dd>
                    <dd class="accordion-navigation">
                        <a href="#panel2b">Accordion 2</a>

                        <div id="panel2b" class="content">
                            Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                    </dd>
                    <dd class="accordion-navigation">
                        <a href="#panel3b">Accordion 3</a>

                        <div id="panel3b" class="content">
                            Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                    </dd>
                </dl>
            </div>
        </dd>
    </dl>
            

         

accordionFoundation-5nested

Hi, I'm trying to nest accordions in Foundation 5, but it doesn't seem to work. When I click one of the nested accordions it closes the top level accordion.

 <dl class="accordion" data-accordion>
        <dd class="accordion-navigation">
            <a href="#paneltest">Accordion 1</a>

            <div id="paneltest" class="content active">
                <dl class="accordion2" data-accordion>
                    <dd class="accordion-navigation">
                        <a href="#panel1b">Accordion 1</a>

                        <div id="panel1b" class="content">
                            Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                    </dd>
                    <dd class="accordion-navigation">
                        <a href="#panel2b">Accordion 2</a>

                        <div id="panel2b" class="content">
                            Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                    </dd>
                    <dd class="accordion-navigation">
                        <a href="#panel3b">Accordion 3</a>

                        <div id="panel3b" class="content">
                            Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                    </dd>
                </dl>
            </div>
        </dd>
    </dl>
            

         
Carol Skelly over 4 years ago

Seems to work ok here: http://codeply.com/go/gKgnaLsSWD

Do you have some other CSS/JS that could be interfering?

Rafi Benkual over 4 years ago

This could also happen if your accordion id's match - though it's not in your posted code. Still, I'd double check that.