title: bootstrap: collapse-group within collapse-group
body: <p>I've used the example from <a href="http://jsfiddle.net/Sherbrow/68RXP/" rel="noreferrer">jsfiddle 68RXP</a> <code>collapse-group</code> to create an expandable div:</p>
  
  <p>HTML:</p>
  
  
  
  <pre><code>&lt;div class="span4 collapse-group"&gt;
       &lt;h2&gt;Heading&lt;/h2&gt;
       &lt;p class="collapse"&gt;Lorem ipsum&lt;/p&gt;
       &lt;p&gt;&lt;a class="btn" href="#"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  
  
  <pre><code>$('.row .btn').on('click', function(e) {
      e.preventDefault();
      var $this = $(this);
      var $collapse = $this.closest('.collapse-group').find('.collapse');
      $collapse.collapse('toggle');
  });
  </code></pre>
  
  <p>When <code>btn</code> is pressed, the <code>p</code> class is toggled between expanded and collapsed mode.</p>
  
  <p>I've tried to use the same concept for recursive collapsible divs:</p>
  
  
  
  <pre><code>&lt;div class="collapse-group"&gt;
      &lt;p&gt;&lt;a class="btn" href="#"&gt;Open outer div &amp;raquo;&lt;/a&gt;&lt;/p&gt;
      &lt;div class="collapse"&gt;
          &lt;h2&gt;Outer div title&lt;/h2&gt;
          &lt;p&gt;Outer div text&lt;/p&gt;
          &lt;div class="collapse-group"&gt;
              &lt;p&gt;&lt;a class="btn" href="#"&gt;Open inner div &amp;raquo;&lt;/a&gt;&lt;/p&gt;
              &lt;div class="collapse"&gt;
                  &lt;h2&gt;Inner div title&lt;/h2&gt;
                  &lt;p&gt;Inner div text&lt;/p&gt;
               &lt;/div&gt;
           &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Same js code as before, see <a href="http://jsfiddle.net/adamatan/WdbUe/3/" rel="noreferrer">jsFiddle WdbUe</a>.</p>
  
  <p>When opening the outer collapsible div for the first time, the inner div is opened as well. <strong>How do I couple each <code>expand</code> button to a single collapsible div?</strong></p>