Twitter Bootstrap Multiple Accordions But Only One Open Panel at a Time

  • Home
  • Languages
  • HTML
  • Twitter Bootstrap Multiple Accordions But Only One Open Panel at a Time

Twitter Bootstrap multiple accordions but only one open panel at a time

Try this:

  <div class="panel-group" id="accordion1">
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne1">
             <h4 class="panel-title">Collapsible Group Item #1</h4>

        </div>
        <div id="collapseOne1" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseTwo1">
             <h4 class="panel-title">Collapsible Group Item #2</h4>

        </div>
        <div id="collapseTwo1" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseThree1">
             <h4 class="panel-title">Collapsible Group Item #3</h4>

        </div>
        <div id="collapseThree1" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
        </div>
    </div>
</div>
<div class="panel-group" id="accordion2">
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne2">
             <h4 class="panel-title">Collapsible Group Item #1</h4>

        </div>
        <div id="collapseOne2" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseTwo2">
             <h4 class="panel-title">Collapsible Group Item #2</h4>

        </div>
        <div id="collapseTwo2" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseThree2">
             <h4 class="panel-title">Collapsible Group Item #3</h4>

        </div>
        <div id="collapseThree2" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
        </div>
    </div>
</div>
<div class="panel-group" id="accordion3">
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseOne3">
             <h4 class="panel-title">Collapsible Group Item #1</h4>

        </div>
        <div id="collapseOne3" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseTwo3">
             <h4 class="panel-title">Collapsible Group Item #2</h4>

        </div>
        <div id="collapseTwo3" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapseThree3">
             <h4 class="panel-title">Collapsible Group Item #3</h4>

        </div>
        <div id="collapseThree3" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
        </div>
    </div>
</div>

Multiple bootstrap accordion panels - only one open at a time

The code below should work as you would expect.

I think the reason it wasn't working before is because you didn't have the id selector in the "data-parent" attribute.

 <div data-quickedit-entity-id="paragraph/90" class="panel-group" id="accordion-90" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
      <div class="panel panel-default consortia">
        <div class="panel-heading" role="tab" id="heading-tes">
          <div class="row panel-title">
            <div class="col-sm-12 col-offset-130">
              <a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#tes-1" aria-expanded="false" aria-controls="tes-1">btn1
                    </a>
              <a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#tes-2" aria-expanded="false" aria-controls="tes-2">btn2
                    </a>
            </div>
          </div>
        </div>
        <div id="tes-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
          <div class="panel-body">
            <p>test1</p>

          </div>
        </div>
        <div id="tes-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
          <div class="panel-body">
            <p>test2</p>

          </div>
        </div>
      </div>
      <div class="panel panel-default consortia">
        <div class="panel-heading" role="tab" id="heading-test2">
          <div class="row panel-title">
            <div class="col-sm-12 col-offset-130">
              <a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#test2-1" aria-expanded="false" aria-controls="test2-1">btn1
                    </a>
              <a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#test2-2" aria-expanded="false" aria-controls="test2-2">btn2
                    </a>
            </div>
          </div>
        </div>
        <div id="test2-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2"  aria-expanded="false">
          <div class="panel-body">
            <p>test21</p>

          </div>
        </div>
        <div id="test2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2"  aria-expanded="false">
          <div class="panel-body">
            <p>test23</p>

          </div>
        </div>
      </div>
    </div>

Collapse plugin: Only show one panel at a time

http://jsfiddle.net/AbtmY/1/

Change 

data-parent="monogram-acc"

to

data-parent="#monogram-acc"

How do you make Twitter Bootstrap Accordion keep one group open?

Here is an easy way to do it:

Bootstrap 4

$('.accordion .btn-link').on('click', function(e) { 
  if (!$(this).hasClass('collapsed')) { 
    e.stopPropagation(); 
  } 
});

from @mr_joncollette in the comments

Bootstrap 3

JsFiddle for Bootstrap 3.

Code for Bootstrap 3:

$('.panel-heading a').on('click',function(e){
    if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){
        e.stopPropagation();
    }
    // You can also add preventDefault to remove the anchor behavior that makes
    // the page jump
    // e.preventDefault();
});

The code checks if the clicked element is the one that is currently shown (by the class "in") and if it does have the "in" class, it stops the hiding process.


Deprecated Bootstrap 2

JsFiddle for Bootstrap 2.

Code for Bootstrap 2:

$('.accordion-toggle').on('click',function(e){
    if($(this).parents('.accordion-group').children('.accordion-body').hasClass('in')){
        e.stopPropagation();
    }
    // You can also add preventDefault to remove the anchor behavior that makes
    // the page jump
    // e.preventDefault();
});

Note: Be careful if you want to attach more click events on the accordion, since the e.stopPropagation() will block events that would occur after the check.

Twitter-bootstrap collapse plugin - how to enable multiple groups to be opened?

Just don't use data-parent attributes:

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
        Collapsible Group Item #1
      </a>

    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">Item 1 Body</div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">Item 2 Body</div>
    </div>
  </div>
</div>

http://jsfiddle.net/HJf6j/2/

Bootstrap accordion open one at a time

Try putting your #panels div outside the foreach loop - that way they are all in the same group.

Also, your #panels div should not have the "#" sign in its id.

<?php if(!empty($tickets)) : ?> 
    <div class="panel-group-custom" id="panels"><!-- Remove the '#' from here. -->
        <?php foreach($tickets as $ticket) : ?>
        <div class="panel panel-default mb-0 no-border">
            <div class="panel-heading panel-heading-custom" ><!-- and remove the . from here. -->
            <h4 class="panel-title">
              <div data-toggle="collapse" data-parent="#panels" data-target="#collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="accordion-title">
                  <div class="row">
                      <div class="overflow-hidden">
                          <div class="col-md-2">
                              <span class="ticket-heading1" title="Ticket ID"><i class="fa fa-ticket" aria-hidden="true"></i> <?php echo $ticket['SupportTicket']['ticket_id']; ?> </span>
                          </div>
                          <div class="col-md-7"><span class="ticket-title"><?php echo $ticket['SupportTicket']['title'] ?></span></div>
                          <div class="col-md-2">
                              <span class="ticket-heading2" title="Ticket created on"><i class="fa fa-calendar" aria-hidden="true"></i> 
                                  <?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>       
                                  <?php echo date_format($bdate,"d-M-Y") ?>         
                              </span>
                          </div>
                          <div class="col-md-1">
                              <span class="accordion-down">
                                <i class="fa fa-chevron-down dropdown-toggle down-arrow2" aria-hidden="true"></i>
                            </span>
                          </div>
                      </div>
                  </div>
              </div>
            </h4>
          </div>
          <div id="collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="hidden-overflow ticket">
                         <div class="full-width hidden-overflow ticket-chat">
                             <p class="color-4 ticket-content"> 
                                <?php echo $ticket['SupportTicket']['description'] ?>                                 
                             </p>
                             <?php if($ticket['SupportTicket']['status']>1) : ?>
                             <p class="color-1 pull-right ticket-content"> <span class="resolution">Feedback</span>                 
                                <?php echo $ticket['SupportTicket']['resolution_text']; ?>
                                 <span class="ticket-updated"><span class="bolder"><i class="fa fa-clock-o" aria-hidden="true"></i>
                                        <?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>       
                                        <?php echo date_format($bdate,"d-M-Y") ?>         
                                  </span></span>
                              </p>
                              <?php endif ?>
                         </div>
                         <div class="full-width hidden-overflow mt-5">
                        <!-- <p class="ticket-close"><i class="fa fa-window-close" aria-hidden="true"></i> Closed on <span class="bolder">17-Aug-2017 </span></p>-->
                         </div>
                     </div>
                 </div>
             </div>
        </div>
        <?php endforeach ?>
    </div><!-- end #panels (moved to after the foreach) -->
<?php else : ?>
    No Records
<?php endif ?>

Here is the working version with the PHP stripped out: https://jsfiddle.net/ytcw2sot/

Bootstrap Collapse Accordion one panel open, all others close

To have multiple accordions but only one open at the same time you just need to combine the data-parent. So I have made a codepen for you to see it working.

I just changed all data-parent to data-parent="#accordion,#accordion2"

    <div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default col-md-4">
        <div class="panel-heading  bites-stings" role="tab" id="headingSeven">
            <a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <h2>Bites and Stings</h2>
            </a>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
                <a href="health-resources/ticks.html"><h4>Ticks</h4></a>
                <a href="#"><h4>Bees and Wasps</h4></a>
                <a href="#"><h4>Animal Bites</h4></a>
            </div>
        </div>
    </div>


    <div class="panel panel-default col-md-4">
        <div class="panel-heading pet-health" role="tab" id="headingTwo">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <h2>Pet Health and Safety</h2>
            </a>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                <a href="#"><h4>Pet Allergies</h4></a>
                <a href="#"><h4>Toxic Plants</h4></a>
                <a href="#"><h4>Pet and Wildlife Encounters</h4></a>
            </div>
        </div>
    </div>


    <div class="panel panel-default col-md-4">
        <div class="panel-heading livestock-health" role="tab" id="headingThree">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                <h2>Livestock Health and Safety</h2>
            </a>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                <a href="#"><h4>This is a Topic</h4></a>
                <a href="#"><h4>Topic 2</h4></a>
                <a href="#"><h4>Another Topic</h4></a>
            </div>
        </div>
    </div>
</div>
</div>

<div class="row">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default col-md-4">
        <div class="panel-heading zoonotic" role="tab" id="headingFour">
            <a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                <h2>Zoonotic Diseases</h2>
            </a>
        </div>
        <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
            <div class="panel-body">
                <a href="#"><h4>Bacterial</h4></a>
                <a href="#"><h4>Fungal</h4></a>
                <a href="#"><h4>Parasitic</h4></a>
                <a href="#"><h4>Prionotic</h4></a>
                <a href="#"><h4>Rickettsial</h4></a>
                <a href="#"><h4>Spirochetes</h4></a>
                <a href="#"><h4>Viral</h4></a>
            </div>
        </div>
    </div>


    <div class="panel panel-default col-md-4">
        <div class="panel-heading allergies" role="tab" id="headingFive">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                <h2>Allergies</h2>
            </a>
        </div>
        <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
            <div class="panel-body">
                <a href="#"><h4>Animal Allergies</h4></a>
                <a href="#"><h4>Environmental Allergies</h4></a>
            </div>
        </div>
    </div>


    <div class="panel panel-default col-md-4">
        <div class="panel-heading environment-health" role="tab" id="headingSix">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                <h2>Environmental Health</h2>
            </a>
        </div>
        <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
            <div class="panel-body">
                <a href="#"><h4>This is a Topic</h4></a>
                <a href="#"><h4>Topic 2</h4></a>
                <a href="#"><h4>Another Topic</h4></a>
            </div>
        </div>
    </div>


</div><!--/collapse-->

</div>

One Click to Open Two Collapsible Panels that are in Two Separate Accordions(Panel-Group)

I Found a solution from an existing answer- Raphael Serota says:

"You can manually toggle the accordion with
$('#myAccordion').collapse('toggle')"

.
So I write my script like this: 

$('.panel-heading').click(function(){

    var href = $(this).attr('href');

    if($(href + "Dyn").hasClass("in")){
            $(href + "Dyn").collapse("toggle");
        }else{
            $(href + "Dyn").collapse("toggle");
        }
});

This works just like my previous solution but keeps the animation running .

Two different bootstrap accordion trigger each other

I see your code example on CodePen is using TWBS 4-alpha2 versions of the css and js. If you revert to TWBS 3.3.6 (and JQuery 1) then your code works.

See this prior question 25359335, and it's JSFiddle

I copied this working code to your CodePen and it broke too, but then I reverted to 3.3.6 and it worked again.

This is a known bug in V4

<sorry> :( </sorry>

Related Topics

How to Make a Chevron Arrow Using CSS

Why Does Vw Include the Scrollbar as Part of the Viewport

How to Style Individual Parts of an Input Placeholder

How to Make a Transparent Canvas in HTML5

Input Type Datetime - Value Format

How to Set Div's Height in CSS and HTML

How to Make the HTML5 Number Field Display Trailing Zeroes

How to Show Multiline Text in a Table Cell

CSS Select Elements with Partial Id

Center an Image Horizontally Using CSS

7 Equal Columns in Bootstrap

How to Override Inline !Important

CSS Property as SASS Mixin Value

Mailto Link Multiple Body Lines

Restrict Future Dates in HTML5 Date Input

Twitter Bootstrap Multiple Accordions But Only One Open Panel at a Time

I Can't Get My Font-Awesome Icons to Show Up. Tried Importing CSS with Multiple Methods

How to Completely Remove Borders from HTML Table


Leave a reply



Submit