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?