title: Bootstrap nested accordion with inner div not being a panel
body: <p>I've been trying to implement a nested accordion using bootstrap. So far, I'm able to have nested panels that act as accordions, as seen in this <a href="http://jsfiddle.net/nppv4npf/" rel="nofollow">jsfiddle</a> and duplicated below. (Sorry for the code bloat.)</p>
  
  <pre><code>&lt;div class="panel-group" id="accordion1"&gt;
  
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
               &lt;h4 class="panel-title"&gt;
                   &lt;a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne"&gt;
                   Collapsible Group Item #1
                   &lt;/a&gt;
               &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
              &lt;div class="panel-body"&gt;Panel 1&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- I'd like the content of this group to behave as the panels do. --&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
               &lt;h4 class="panel-title"&gt;
                  &lt;a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo"&gt;
                      Collapsible Group Item #2
                  &lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;
  
                  &lt;div class="collapse-group" id="#accordion2"&gt;
                      &lt;h2&gt;Heading&lt;/h2&gt;
                      &lt;p&gt;&lt;a data-toggle="collapse" data-parent="#accordion2" data-target="#collapseTwoOne"&gt;View details 2.1 &amp;raquo;&lt;/a&gt;&lt;/p&gt;
                      &lt;p class="collapse" id="collapseTwoOne"&gt;Details 1&lt;/p&gt;
                      &lt;p&gt;&lt;a data-toggle="collapse" data-parent="#accordion2" data-target="#collapseTwoTwo"&gt;View details 2.2 &amp;raquo;&lt;/a&gt;&lt;/p&gt;
                      &lt;p class="collapse" id="collapseTwoTwo"&gt;Details 2&lt;/p&gt;              
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- This group shows how panels may be nested. But what about a plain div inside a panel? --&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
               &lt;h4 class="panel-title"&gt;
                   &lt;a data-toggle="collapse" data-parent="#accordion3" href="#collapseThree"&gt;
                   Collapsible Group Item #3
                   &lt;/a&gt;
               &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapseThree" class="panel-collapse collapse in"&gt;
              &lt;div class="panel-body"&gt;
  
                  &lt;div class="panel-group" id="accordion2"&gt;
                      &lt;div class="panel panel-default"&gt;
                          &lt;div class="panel-heading"&gt;
                               &lt;h4 class="panel-title"&gt;
                                  &lt;a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeOne"&gt;
                                      Collapsible Group Item #3.1
                                  &lt;/a&gt;
                                &lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div id="collapseThreeOne" class="panel-collapse collapse in"&gt;
                              &lt;div class="panel-body"&gt;Panel 3.1&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="panel panel-default"&gt;
                          &lt;div class="panel-heading"&gt;
                              &lt;h4 class="panel-title"&gt;
                                  &lt;a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeTwo"&gt;            
                                      Collapsible Group Item #3.2
                                  &lt;/a&gt;
                              &lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div id="collapseThreeTwo" class="panel-collapse collapse"&gt;
                              &lt;div class="panel-body"&gt;Panel 3.2&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>However, what I'd like to achieve is having the items in "Collapsible Group Item #2" from the code above to also display in a mutually exclusive way, i.e. if one div is being displayed, then the other will be hidden (if it's not already so). </p>
  
  <p>What do I have to do to get the desired effect?</p>