title: How to get one accordion tab open at a time Bootstrap
body: <p>I'm having trouble trying to get it so my Bootstrap accordion style form only has one step tab open at a time. What do I need to change to get only one tab to be open at a time?</p>
  
  <p>Here is a <a href="https://codepen.io/Frankk97/pen/VGpYaz" rel="nofollow noreferrer">CodePen</a> link to the full thing.
  Here is a portion of my HTML:</p>
  
  <pre><code>&lt;div id="accordion" role="tablist" aria-multiselectable="false"&gt;
  &lt;div class="card"&gt;
      &lt;div class="card-header" role="tab" id="headingOne"&gt;
          &lt;div class="mb-0"&gt;
              &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed"&gt;
                  &lt;h3&gt;Step 1 of 4: Create Profile&lt;/h3&gt;
                  &lt;div class="edit-step"&gt;Edit Step&lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne" aria-expanded="false" style=""&gt;
          &lt;div class="card-block"&gt;
              &lt;form&gt;
                  &lt;h1&gt;Organization&lt;/h1&gt;
                  &lt;label&gt;Membership Category&lt;/label&gt;
                  &lt;select id="category"&gt;
                      &lt;option value=""&gt;&lt;/option&gt;
                      &lt;option value="CM"&gt;Company&lt;/option&gt;
                      &lt;option value="NS"&gt;Educational&lt;/option&gt;
                      &lt;option value="GM"&gt;Government&lt;/option&gt;
                      &lt;option value="OM"&gt;Organizational&lt;/option&gt;
                      &lt;option value="IND"&gt;Individual&lt;/option&gt;
                      &lt;option value="RET"&gt;Retail&lt;/option&gt;
                  &lt;/select&gt;&lt;br&gt;&lt;br&gt;
                  &lt;div id="continue1" class="continue-button"&gt;Continue&lt;/div&gt;&lt;br&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="card"&gt;
      &lt;div class="card-header" role="tab" id="headingTwo"&gt;
          &lt;div class="mb-0"&gt;
              &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseOne" class="collapsed"&gt;
                  &lt;h3&gt;Step 2 of 4: Payment Information&lt;/h3&gt;
                  &lt;div class="edit-step"&gt;Edit Step&lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo" aria-expanded="false"&gt;
          &lt;div class="card-block"&gt;
              &lt;form&gt;
                  &lt;h1&gt;Organization&lt;/h1&gt;
                  &lt;br&gt;&lt;br&gt;
                  &lt;div id="continue2" class="continue-button"&gt;Continue&lt;/div&gt;&lt;br&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>