javascript - bootstrap: collapse-group within collapse-group -

i've used example jsfiddle 68rxp collapse-group create 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 pressed, p class toggled between expanded , collapsed mode.

i've tried use same concept 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 before, see jsfiddle wdbue.

when opening outer collapsible div first time, inner div opened well. how couple each expand button single collapsible div?

i've used data-toggle="collapse" data-target="#some_id" , distinct id 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 js code:

$(document).ready(function(){           $(".collapse").collapse(); }); 

working example: jsfiddle k63p3

credit: aximay@jsbin.