Unable to create a nested accordion

[suchetaswabhav]

Hi,

I am trying to implement a nested accordion on the sidebar of this template. However, the toggle isn't working . Like only the Collapsible Group Item #1, Collapsible Group Item #2, Collapsible Group Item #3 are seen on the screen, when i click it , collapse occurs but it doesn't stays. It collapses back

What to do ? code - It is just a copy-paste from the reference link - https://codepen.io/marklsanders/pen/OPZXXv

sidebar.component.html

    <div class="sidebar-wrapper">
       <ul class="nav nav-dropdown-items">

     <li>
      <div class="panel-group" id="accordion1">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data- 
     parent="#accordion1" href="#collapseOne">Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">Panel 1</div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data- 
      parent="#accordion1" href="#collapseTwo">Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="panel-body">
                        <h2>Heading</h2>
                        <div class="panel-group" id="accordion21">
                            <div class="panel">
                                <a data-toggle="collapse" data- 
      parent="#accordion21" href="#collapseTwoOne">View details 2.1 
        &raquo;
                                </a>
                                <div id="collapseTwoOne" class="panel- 
       collapse collapse">
                                    <div class="panel-body">Details 
      1</div>
                                </div>
                            </div>
                            <div class="panel ">
                                <a data-toggle="collapse" data- 
        parent="#accordion21" href="#collapseTwoTwo">View details 2.2    &raquo;
                                </a>
                                <div id="collapseTwoTwo" class="panel- collapse collapse">
                                    <div class="panel-body">Details  2
       </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

           <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                        <!-- data-toggle="collapse" -->
                    <a  data-parent="#accordion1" 
       href="#collapseThree">Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">

                    <div class="panel-group" id="accordion2">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data- 
        parent="#accordion2" href="#collapseThreeOne">Collapsible Group Item  #3.1

                                    </a>
                                </h4>
                            </div>
                            <div id="collapseThreeOne" class="panel-  collapse collapse in">

                                <div class="panel-body">Panel 3.1
             </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a  data-toggle="collapse" data- 
        parent="#accordion2" href="#collapseThreeTwo">Collapsible Group Item #3.2

                                    </a>
                                </h4>
                            </div>
                            <div id="collapseThreeTwo" class="panel-   collapse collapse">

                                <div class="panel-body">Panel  3.2
             </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
           </div>

          </div>

        </li>

      <!-- nested accordion -->

       </ul>
       </div>

Image -

[dragosct]

Hi, @suchetaswabhav! Thank you for using our products. I saw that it's the second issue from the Angular product opened here, so please when you have an issue from an Angular or another framework open an issue to the repository with the same name, this is the repository for the HTML product, thanks. Now related to your problem, we will launch the PRO version in about 2-3 weeks and there you will find also this component ready to use.

Regards, Dragos