1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: How to create nested (multilevel) accordion

daniel.halaasz pro asked 6 years ago

Dear all, Could someone please provide me an example, how can I embed an accordion inside another accordion? My problem is that if I click on the inner accordion's title, it triggers the parent accordion as well, and this is not what I would expect. Thank you for your help in advance.

danaabhi7119 free commented 2 years ago

https://codepen.io/danaabhi7119/pen/eYBJKmO

Leo Merkel pro answered 6 years ago

@daniel But it functions exactly like the accordion you wish to implement. I found the MDB and B4 Docs quite helpful on this. Hope this helps, Leo

daniel.halaasz pro answered 6 years ago

Dear Bartlomiej, Thank you for your reply! However, that is not an accordion in your example, it's a grouped list. How can I achieve the same functionality with accordions? Thanks in advance!

Bartłomiej Malanowski staff answered 6 years ago

Hello! I think this page may be helpful for you

acates pro answered 6 years ago

So I just ran a test and see what you mean. My id and href are unique but clicking the inner accordion element collapses the parent. Anybody have ideas? 

    <!-- Outer -->
    <!--Accordion wrapper-->
<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">

    <!--First panel-->
    <div class="panel panel-default">

        <!--Panel heading-->
        <div class="panel-heading" role="tab" id="headingOne">
            <h5 class="panel-title">
                <a class="arrow-r" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Outer Item #1<i class="fa fa-angle-down rotate-icon"></i>
                </a>
            </h5>
        </div>

        <!--Panel body-->
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<!-- Inner accordion -->

<!--Accordion2 wrapper-->
<div class="accordion" id="inneraccordion" role="tablist" aria-multiselectable="true">

<!--First panel-->
<div class="panel panel-default">

    <!--Panel heading-->
    <div class="panel-heading" role="tab" id="innerheadingOne">
        <h5 class="panel-title">
            <a class="arrow-r" data-toggle="collapse" data-parent="#inneraccordion" href="#innercollapseOne" aria-expanded="false" aria-controls="innercollapseOne"> Inner Item #1<i class="fa fa-angle-down rotate-icon"></i>
            </a>
        </h5>
    </div>

    <!--Panel body-->
    <div id="innercollapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="innerheadingOne">
        Inner1
    </div>
</div>
<!--/.First panel-->

<!--Second panel-->
<div class="panel panel-default">

    <!--Panel heading-->
    <div class="panel-heading" role="tab" id="innerheadingTwo">
        <h5 class="panel-title">
            <a class="arrow-r" data-toggle="collapse" data-parent="#inneraccordion" href="#innercollapseTwo" aria-expanded="false" aria-controls="innercollapseOne"> Inner Item #2<i class="fa fa-angle-down rotate-icon"></i>
            </a>
        </h5>
    </div>

    <!--Panel body-->
    <div id="innercollapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="innerheadingTwo">
        Inner2
    </div>
</div>
<!--/.Second panel-->

<!--Third panel-->
<div class="panel panel-default">

    <!--Panel heading-->
    <div class="panel-heading" role="tab" id="innerheadingThree">
        <h5 class="panel-title">
            <a class="arrow-r" data-toggle="collapse" data-parent="#inneraccordion" href="#innercollapseThree" aria-expanded="false" aria-controls="innercollapseOne">Inner Item #3<i class="fa fa-angle-down rotate-icon"></i>
            </a>
        </h5>
    </div>

    <!--Panel body-->
    <div id="innercollapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="innerheadingThree">
        Inner3
    </div>
</div>
<!--/.Third panel-->

</div>
<!--/.Accordion2 wrapper-->

<!-- /Inner accordion -->
        </div>
    </div>
    <!--/.First panel-->

    <!--Second panel-->
    <div class="panel panel-default">

        <!--Panel heading-->
        <div class="panel-heading" role="tab" id="headingTwo">
            <h5 class="panel-title">
                <a class="arrow-r" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseOne"> Outer Item #2<i class="fa fa-angle-down rotate-icon"></i>
                </a>
            </h5>
        </div>

        <!--Panel body-->
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            Inner2
        </div>
    </div>
    <!--/.Second panel-->

    <!--Third panel-->
    <div class="panel panel-default">

        <!--Panel heading-->
        <div class="panel-heading" role="tab" id="headingThree">
            <h5 class="panel-title">
                <a class="arrow-r" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseOne">Outer Item #3<i class="fa fa-angle-down rotate-icon"></i>
                </a>
            </h5>
        </div>

        <!--Panel body-->
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            Inner3
        </div>
    </div>
    <!--/.Third panel-->

</div>
<!--/.Accordion wrapper-->
    <!-- /Outer -->

acates pro answered 6 years ago

The href in the list group references an ID of a div to know which content to show when selected. It sounds like your inner accordion div id and href are pointed to an id that is duplicated in your parent. Make sure each div id is unique.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
daniel.halaasz
Pro User 10Support score
1Questions 1Answers 0Snippets