Невозможно создать вложенный аккордеон в угловом шаблоне

Question

Я пытаюсь реализовать вложенный аккордеон на боковой панели шаблона now-ui-dashboard angular2.Однако тумблер не работает.Подобно только элементу # 1 сворачиваемой группы, элементу 2 сворачиваемой группы, элементу 3 сворачиваемой группы видны на экране, когда я щелкаю по нему, происходит сбой, но он не остается.Он рушится обратно

Что делать?Как я могу реализовать аккордеон.Я хочу это на боковой панели.

Используемый шаблон - creative-tim / now-ui-dashboard

code - Код является копией вставки ссылки - https://codepen.io/marklsanders/pen/OPZXXv

sidebar.component.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="sidebar-wrapper">
  <ul class="nav nav-dropdown-items">
    <!-- nested accordion -->
    <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>

Изображение -