Bootstrap nested collapsable panels

Question

I am using this code ( http://bootsnipp.com/user/snippets/OeaKO ) here to implement collapsable bootstrap panels.

I tried to add other collapsable panels inside that ones, but it doesn't work properly.

Here is my actual HTML-Code for the nested collapsable panels:

<div class="panel panel-primary">
  <div class="panel-heading clickable">
    <h3 class="panel-title">Online-Shopping Partner</h3>
    <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span>
  </div>
  <div class="panel-body">

    <div class="panel panel-primary">
      <div class="panel-heading clickable">
        <h3 class="panel-title">Übersicht</h3>
        <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading clickable">
        <h3 class="panel-title">Export</h3>
        <span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>

  </div>
</div>

The JavaScript/CSS code is the same as the one on the 'bootsnip'-link above.

Answer 1

In the jQuery code you provided, add the following css class to both "inner" panels:

panel-collapsed

And replace all occurences of

$this.parents

With

$this.closest

Working JS Fiddle