CODEWITHSUNDEEP
jquerytwitter-bootstrap
MeltingDog
MeltingDog

Reputation: 15404

Bootstrap Collapse Accordion not responding

I am having trouble turning a group of Collapsable elements into a Collapsable Accordion group. Individually, they work fine - but they just all remain open and don't collapse when a new one is opened.

My code is:

<div class="panel" id="list">

  <div class="clearfix" data-toggle="collapse" data-target="#detail" data-parent="#list" aria-expanded="true">
    <a><i class="fa fa-caret-down"></i> Accounts</a>
  </div>
  <div id="detail" class="collapse" aria-expanded="true" role="tabpanel">
    Lorem Ipsum
  </div><!--COLLAPSE-->

  <div class="clearfix" data-toggle="collapse" data-target="#detail1" data-parent="#list" aria-expanded="true">
    <a><i class="fa fa-caret-down"></i> Bookings</a>
  </div>
   <div id="detail1" class="collapse" aria-expanded="true" role="tabpanel">
    Lorem ipsum
   </div><!--COLLAPSE-->

</div>

Even though I have added data-parent="#list" they're still behaving individually. Would anyone know what I've done wrong?

Upvotes: 0

Views: 191

Answers (2)

MeltingDog
MeltingDog

Reputation: 15404

I found this only works if I wrap each group I want to collapse in the .panel class, eg:

<div class="panel">
 <div class="clearfix" data-toggle="collapse" data-target="#detail" data-parent="#list" aria-expanded="true">
    <a><i class="fa fa-caret-down"></i> Accounts</a>
  </div>
  <div id="detail" class="collapse" aria-expanded="true" role="tabpanel">
    Lorem Ipsum
  </div><!--COLLAPSE-->
</div>

Upvotes: 0

Katy Coello Coraspe
Katy Coello Coraspe

Reputation: 46

You can use bootstrap accordion instead, is really easy, try this:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
         Title #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Body #1
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      Title #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Body # 2
      </div>
    </div>
  </div>

Upvotes: 1

Related Questions