title: CSS Collapsible groups - Bootstrap
body: <p>I'm using bootstrap collapsible button group. I want only one single group box to be visible at a time. I made a function in js to remove the "in" class and to change the aria-expanded statement but I think this is useless since people are using data-parent="#myGroup".</p>
  
  <p>Apparently data-parent="#myGroup" won't work for me for a reason.</p>
  
  <p>I tried using data-parent on single element and on both buttons and collapse group and still can't make it work.</p>
  
  <p>In this fiddle you can see that multiple groups can be show. I want the others to hide when I press a button.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;p&gt;
    &lt;button id="a" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#AA" aria-expanded="false" aria-controls="AA" data-parent="#myGroup"&gt;
    A
    &lt;/button&gt;
  
    &lt;button id="b" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#BB" aria-expanded="false" aria-controls="BB" data-parent="#myGroup"&gt;
      B
    &lt;/button&gt;
  
      &lt;button id="c" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#CC" aria-expanded="false" aria-controls="CC" data-parent="#myGroup"&gt;
      C
    &lt;/button&gt;
  
        &lt;button id="d" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#DD" aria-expanded="false" aria-controls="DD" data-parent="#myGroup"&gt;
      D
    &lt;/button&gt; 
  &lt;/p&gt;
  
  
  &lt;div class="collapse" id="AA" data-parent="#myGroup"&gt;
    &lt;div class="card card-block"&gt;
     bla bla bla
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="collapse" id="BB" data-parent="#myGroup"&gt;
    &lt;div class="card card-block"&gt;
  bla bla bla
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  
  &lt;div class="collapse" id="CC" data-parent="#myGroup"&gt;
    &lt;div class="card card-block"&gt;
      bla bla bla
    &lt;/div&gt;
    &lt;/div&gt;
  
  
  
  &lt;div class="collapse" id="DD" data-parent="#myGroup"&gt;
    &lt;div class="card card-block"&gt;
      bla bla bla
        &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>