I am using this code ( ) 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.

I am using this code ( http://bootsnipp./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.

• javascript
• html
• css
• twitter-bootstrap
• panel

• 1 "Doesn't work" is not a technical term. What do you mean "doesn't work"? – Rob Commented Apr 28, 2016 at 12:53
• When the parent panel slides down, the child 'collapsable' panels are already "opened" (position slide-down). Instead of that, they should be on the initial position (slided up) and on click, on their header or "+" they should slide down. They should have the same functionality as the parent panels. And now, when I click on the header of the child panels, the whole panel slided up (the parent also..). But I want that only the clicked child slides up/down when clicked. As said, they should have exactly the same functionality as the collapsable parent panels. – ZelelB Commented Apr 28, 2016 at 13:02
• have you solved this ? or you still need help with this ? – heman123 Commented Jun 6, 2017 at 10:14

2 Answers 2

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

There are a few things that are missing from the example you are posting to have nested collapsible panels. Take a look at some of the properties that are needed to identify which PANEL you want to collapse with data-xxxx tags on this page:

http://www.w3schools./bootstrap/bootstrap_collapse.asp

By adding those tags you know exactly what DIV you will be expanding/collapsing.

This is a working example already posted by somebody else:

http://jsfiddle/n2fole00/6JyFr/4/

Pay attention to the data-toggle and href attributes in the example

<div class="panel-heading">
  <h4 class="panel-title">
      <a class="panel-toggle" data-toggle="collapse" data-parent="#accordionYear" href="#collapseJune">
          2014
      </a>
  </h4>
</div>

<!-- Here we insert another nested accordion -->
<div id="collapseJune" class="panel-body collapse">
  <div class="panel-inner">


    <div class="panel-group" id="accordionJune">
      <div class="panel panel-default">

        <div class="panel-heading">
          <h4 class="panel-title">
              <a class="panel-toggle" data-toggle="collapse" data-parent="#accordionJune" href="#collapseDay">
                June
              </a>
          </h4>
        </div>