bootstrap: collapse-group within collapse-group

collapsable, html, javascript, jquery, twitter-bootstrap

Solution

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 &raquo;</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 &raquo;</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 &raquo;</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.

Problem

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 &raquo;</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 &raquo;</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 &raquo;</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?

Original source