title: Multi level collapsable/accordion that goes on infinitely without breaking table content
body: <p>I am trying to make a multi-level accordion with tables inside it that can have any number of levels.
  <a href="https://i.stack.imgur.com/k7MrB.jpg" rel="nofollow noreferrer">this is my requirement</a></p>
  
  <p>I'm still a noob so I've tried some other stuff on code pen which had unlimited nesting but the CDN or something seems to break my layout but I finally found
  one that works and now my layout looks like <a href="https://i.stack.imgur.com/FspPG.jpg" rel="nofollow noreferrer">this(base level)</a> <a href="https://i.stack.imgur.com/jJ5zm.jpg" rel="nofollow noreferrer">(expanded)</a> but the table gets broken. 
  My current Code is a mess so id like to know if there is a clean way to do it, current full code:
  <a href="https://pastebin.com/PBTDhxyY" rel="nofollow noreferrer">https://pastebin.com/PBTDhxyY</a></p>
  
  <p>Accordion Code(base level):</p>
  
  <pre><code>&lt;div class="row product-listing"&gt;
  &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-body nested-accordion"&gt;
              &lt;div class="row mt-10"&gt;
                  &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
                      &lt;div class="panel-group" id="level1-accordion"&gt;
                          &lt;div class="panel panel-default"&gt;
                              &lt;div class="panel-heading"&gt;
                                  &lt;a data-toggle="collapse" data-parent="#level1-accordion" href="#plast-pro-1" class="collapsed"&gt;
                                      &lt;table class="table"&gt;
                                          &lt;tr&gt;
                                              &lt;td&gt;LEVEL 1&lt;/td&gt;
                                              &lt;?php 
                                                  for ($k = 0 ; $k &lt; 11; $k++){ 
                                                      echo '&lt;td&gt;&amp;nbsp;&lt;/td&gt;'; 
                                                  }
                                                  ?&gt;
                                              &lt;td&gt;0.00&lt;/td&gt;
                                              &lt;td&gt;0.00&lt;/td&gt;
                                              &lt;td&gt;0.00&lt;/td&gt;
                                              &lt;td&gt;0.00&lt;/td&gt;
                                              &lt;td&gt;0.00&lt;/td&gt;
                                              &lt;td&gt;0.00&lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/table&gt;
                                  &lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div id="plast-pro-1" class="panel-collapse collapse"&gt;
                                  &lt;div class="panel-body"&gt;
                                      &lt;ul class="list-unstyled"&gt;
                                          &lt;li&gt;
                                              &lt;div class="panel-group" id="level2-accordion" role="tablist" aria-multiselectable="true"&gt;
                                                  &lt;div class="panel panel-default"&gt;
                                                      &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
                                                          &lt;h4 class="panel-title"&gt;
                                                              &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#level2-accordion" href="#plast-pro-2" aria-expanded="true" aria-controls="plast-pro-2"&gt;
                                                                  &lt;table class="table"&gt;
                                                                      &lt;tr&gt;
                                                                          &lt;td&gt;LEVEL 2&lt;/td&gt;
                                                                          &lt;?php 
                                                                              for ($k = 0 ; $k &lt; 11; $k++){ 
                                                                                  echo '&lt;td&gt;&amp;nbsp;&lt;/td&gt;'; 
                                                                              }
                                                                              ?&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                      &lt;/tr&gt;
                                                                  &lt;/table&gt;
                                                              &lt;/a&gt;
                                                          &lt;/h4&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/li&gt;
                                          &lt;li&gt;
                                              &lt;div class="panel-group" id="level2test" role="tablist" aria-multiselectable="true"&gt;
                                                  &lt;div class="panel panel-default"&gt;
                                                      &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
                                                          &lt;h4 class="panel-title"&gt;
                                                              &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#level2test" href="#level2testlink" aria-expanded="true" aria-controls="plast-pro-2"&gt;
                                                                  &lt;table class="table"&gt;
                                                                      &lt;tr&gt;
                                                                          &lt;td&gt;LEVEL 2&lt;/td&gt;
                                                                          &lt;?php 
                                                                              for ($k = 0 ; $k &lt; 11; $k++){ 
                                                                                  echo '&lt;td&gt;&amp;nbsp;&lt;/td&gt;'; 
                                                                              }
                                                                              ?&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                      &lt;/tr&gt;
                                                                  &lt;/table&gt;
                                                              &lt;/a&gt;
                                                          &lt;/h4&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/li&gt;
                                          &lt;!-- ------------------------------------------------------------------------------------------------------------------------------------------------- --&gt;
                                          &lt;li&gt;
                                              &lt;div class="panel-group" id="level2testb" role="tablist" aria-multiselectable="true"&gt;
                                                  &lt;div class="panel panel-default"&gt;
                                                      &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
                                                          &lt;h4 class="panel-title"&gt;
                                                              &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#level2testb" href="#level2testlinkb" aria-expanded="true" aria-controls="plast-pro-2"&gt;
                                                                  &lt;table class="table"&gt;
                                                                      &lt;tr&gt;
                                                                          &lt;td&gt;LEVEL 2&lt;/td&gt;
                                                                          &lt;?php 
                                                                              for ($k = 0 ; $k &lt; 11; $k++){ 
                                                                                  echo '&lt;td&gt;&amp;nbsp;&lt;/td&gt;'; 
                                                                              }
                                                                              ?&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                          &lt;td&gt;0.00&lt;/td&gt;
                                                                      &lt;/tr&gt;
                                                                  &lt;/table&gt;
                                                              &lt;/a&gt;
                                                          &lt;/h4&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>