CODEWITHSUNDEEP
csstwitter-bootstrap
Tatiana Frambach
Tatiana Frambach

Reputation: 53

bootstrap accordion not collapsing other open tabs automatically

I'm trying to implement bootstrap accordion collapse in a project, and i'm having trouble with the auto-collapsing part. Suppose there are 3 divs: A, B and C. if A is open and I click on B, A should auto-collapse, but it doesn't. I want only one section to be open at the same time.

I've already checked multiple times my code, and also some tutorials and other questions here, but still can't make it work. Any help would be much appreciated.

Here is the fiddle, although the animation doesn't work since its linked with bootstrap. But at least you guys can see the code: https://jsfiddle.net/3ap18Lda/1/ 

    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


    <!-- accordion -->

<div class="container">
  <div id="accordion" role="tablist" aria-multiselectable="true">


    <div class="row caracteristicas-table">
      <div class="col-sm-12">
        <div role="tab" id="headingOne">

          <h3 class="dark-grey">HERE GOES THE TITLE</h3>

          <span class="orange-line"></span>

           <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum pharetra ligula, non varius diam feugiat dignissim. Cras tellus quam, facilisis eget imperdiet eu, fermentum non justo. </h4>


            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              <i class="down-arrow"><img src="images/down-arrow.svg"></i><h4 class="text-quero-mais">I want to know some more</h4>
            </a>

        </div> <!-- / tab -->   

        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <h4>Mauris vel ante eu tortor vulputate congue eu eget nibh. Suspendisse malesuada vehicula felis, vel sodales diam interdum eu. Etiam eu ante egestas, elementum nulla nec, gravida felis.</h4>
        </div>  <!-- / collaspeOne -->


      </div><!-- / col --> 
    </div> <!-- / row -->





    <div class="row caracteristicas-table">
      <div class="col-sm-12">
        <div role="tab" id="headingTwo">

          <h3 class="dark-grey">HERE GOES THE TITLE</h3>

          <span class="orange-line"></span>

           <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum pharetra ligula, non varius diam feugiat dignissim. Cras tellus quam, facilisis eget imperdiet eu, fermentum non justo.</h4>


            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              <i class="down-arrow"><img src="images/down-arrow.svg"></i><h4 class="text-quero-mais">I want to know some more</h4>
            </a>

        </div> <!-- / tab -->   

        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <h4>Mauris vel ante eu tortor vulputate congue eu eget nibh. Suspendisse malesuada vehicula felis, vel sodales diam interdum eu. Etiam eu ante egestas, elementum nulla nec, gravida felis.</h4>
        </div>  <!-- / collaspeTwo -->


      </div><!-- / col --> 
    </div> <!-- / row -->




    <div class="row caracteristicas-table">
      <div class="col-sm-12">
        <div role="tab" id="headingThree">

          <h3 class="dark-grey">HERE GOES THE TITLE</h3>

          <span class="orange-line"></span>

           <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum pharetra ligula, non varius diam feugiat dignissim. Cras tellus quam, facilisis eget imperdiet eu, fermentum non justo. </h4>


            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              <i class="down-arrow"><img src="images/down-arrow.svg"></i><h4 class="text-quero-mais">I want to know some more</h4>
            </a>

        </div> <!-- / tab -->   

        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          <h4>Mauris vel ante eu tortor vulputate congue eu eget nibh. Suspendisse malesuada vehicula felis, vel sodales diam interdum eu. Etiam eu ante egestas, elementum nulla nec, gravida felis.</h4>
        </div>  <!-- / collaspeThree -->


      </div><!-- / col --> 
    </div> <!-- / row -->


  </div> <!-- / accordion --> 
</div> <!-- / container -->

Thanks!

Upvotes: 3

Views: 2226

Answers (1)

Ziv Weissman
Ziv Weissman

Reputation: 4516

You are not loading bootstrap and neither jQuery,

You need to load them both in order for this to work. I've simply added links to your fiddle and it works.

<script src='jquery.js'/>
<script src='bootstrap.js'/>

After I understand the real problem:

Was breaking my head over this. I figure out what is wrong:

I've fixed it in this fiddle by adding panel class to each div and adding this script:

$('.panel-collapse').on('show.bs.collapse', function (e) {
        $(e.target).closest('.panel').siblings().find('.panel-collapse').collapse('hide');
    });

Upvotes: 3

Related Questions