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.

Solution 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

Solution 2

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.com/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.net/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>

Comments

[ZelelB]

the panel I am using, are not the default ones.. They are custom collapsable panels. Please take a look at the code, and try to preview it on bootsnipp, so you see what I mean.

[ProgrammerV5]

You mean custom in the UI sense? If that is the case it doesn't matter, you need to specify the behavior anyway. If by custom you mean you are handling everything then this is a whole different story. When I try to open up the bootsnipp page I get a login window.

[ZelelB]

Thank you for the answer! Almost correct.. Just the child panels should be closed (slided up) when the parent panel slides down, and have to be opened explicitly, when clicking on the header.

[Pierre]

panel-group is the key here. If you add panels inside a panel-body, be sure to surround them with a panel-group first