I've used the example from jsfiddle 68RXP collapse-group
to create an expandable div:
HTML:
<div class="span4 collapse-group">
<h2>Heading</h2>
<p class="collapse">Lorem ipsum</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
Javascript:
$('.row .btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $collapse = $this.closest('.collapse-group').find('.collapse');
$collapse.collapse('toggle');
});
When btn
is pressed, the p
class is toggled between expanded and collapsed mode.
I've tried to use the same concept for recursive collapsible divs:
<div class="collapse-group">
<p><a class="btn" href="#">Open outer div »</a></p>
<div class="collapse">
<h2>Outer div title</h2>
<p>Outer div text</p>
<div class="collapse-group">
<p><a class="btn" href="#">Open inner div »</a></p>
<div class="collapse">
<h2>Inner div title</h2>
<p>Inner div text</p>
</div>
</div>
</div>
</div>
Same js code as before, see jsFiddle WdbUe.
When opening the outer collapsible div for the first time, the inner div is opened as well. How do I couple each expand
button to a single collapsible div?
I've used data-toggle="collapse" data-target="#some_id"
and a distinct id for every collapsible div
:
<div class="container">
<div class="hero-unit">
<h2>Bootstrap-jQuery collapse example</h2>
<p>Based on <a href="http://jsfiddle.net/Sherbrow/68RXP/">fiddle 68RXP</a></p>
<div class="collapse-group">
<p><a class="btn" data-toggle="collapse" data-target="#demoout">Open outer div »</a></p>
<div class="collapse in" id="demoout">
<h1>Outer div title</h1>
<p>Outer div text</p>
<div class="collapse-group">
<p><a class="btn" data-toggle="collapse" data-target="#demoin">Open inner div »</a></p>
<div class="collapse in" id="demoin">
<h2>Inner div title</h2>
<p>Inner div text</p>
<div class="collapse-group">
<p><a class="btn" data-toggle="collapse" data-target="#demoinin">Open inner div »</a></p>
<div class="collapse in" id="demoinin">
<h3>Inner-inner div title</h3>
<p>Inner-inner div text</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
With this js
code:
$(document).ready(function(){
$(".collapse").collapse();
});
Working example: jsfiddle K63P3
Credit: aximay@jsbin.