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.
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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.