I have a lot of nested bootstrap collapsible elements on a page. As example http://jsfiddle.net/JPgLT/7/
How can i set a link to toggle all elements only within the parent element?
JavaScript
x
36
36
1
<div class="panel panel-default">
2
<div class="panel-heading">
3
<h2 class="panel-title">
4
<a href="#collapse-764" data-parent="#collapsible-" class="accordion-toggle" data-toggle="collapse">Headline 1</a>
5
</h2>
6
</div>
7
<div id="collapse-764" class="panel-collapse collapse">
8
<div class="panel-body">
9
<div class="panel panel-default">
10
<div class="panel-heading">
11
<h2 class="csc-firstHeader panel-title">
12
<a href="#collapse-765" data-parent="#collapsible-764" class="accordion-toggle" data-toggle="collapse">Headline 1.1</a>
13
</h2>
14
</div>
15
<div id="collapse-765" class="panel-collapse collapse">
16
<div class="panel-body">
17
<p>Text 1.1</p>
18
</div>
19
</div>
20
</div>
21
<div class="panel panel-default">
22
<div class="panel-heading">
23
<h2 class="panel-title">
24
<a href="#collapse-766" data-parent="#collapsible-764" class="accordion-toggle" data-toggle="collapse">Headline 1.2</a>
25
</h2>
26
</div>
27
<div id="collapse-766" class="panel-collapse collapse">
28
<div class="panel-body">
29
<p>Text 1.2</p>
30
</div>
31
</div>
32
</div>
33
</div>
34
</div>
35
</div>
36
Advertisement
Answer
You could add a special class closeall
to the buttons, and then toggle the collapse state using jQuery..
JavaScript
1
8
1
$('.closeall').click(function(){
2
$(this).parents('.panel-heading') // find the parent heading element
3
.next('.panel-collapse') // find the next collapse element
4
.collapse('show') // make sure it's open
5
.find('.panel-collapse') // find inner collapse elements
6
.collapse('toggle'); // toggle their state
7
});
8
Bootstrap 3 Demo: https://codeply.com/p/g0vquJl0Xn
Related questions
bootstrap 3 collapse(‘hide’) opens all collapsibles?