Bootstrap Collapse other sections when one is expanded

Question

I am making a Rails app  and am trying to achieve a particular functionality relating to Twitter s Bootstrap collapse  Bear with me as I explain it   I currently have the following view     When each of these buttons is clicked  their data-toggle div is expanded  The view is set-up as follows        lt button class  btn dropdown  data-toggle  collapse  data-target   keys  gt  lt i class  icon-chevron-right  gt  lt  i gt  Keys  lt span class  badge badge-info pull-right  gt  lt     app keys count   gt  lt  span gt  lt  button gt       lt button class  btn dropdown  data-toggle  collapse  data-target   attrs  gt  lt i class  icon-chevron-right  gt  lt  i gt  Attributes lt  button gt       lt button class  btn dropdown  data-toggle  collapse  data-target   edit  gt  lt i class  icon-chevron-right  gt  lt  i gt  Edit Details lt  button gt        lt div class  collapse indent  id  keys  gt           lt  --content-- gt       lt  div gt        lt div class  collapse indent  id  attrs  gt           lt  --content-- gt       lt  div gt        lt div class  collapse  id  edit  gt           lt  --content-- gt       lt  div gt    I have them set-up like this  because I want the buttons side by side  in a row  If I move the buttons to be right above the view they expand collapse  then the buttons stack on top of one another   So  my end goal is to have the three buttons side-by-side and have them collapse and expand their respective sections  The current set-up works  however is a little awkward  For example  if someone expands the keys section and then expands the attributes section  they have to scroll below the keys section   There are two possible solutions to this problem  One is that pressing one button causes the other 2 to collapse themselves  This would mean that at any given time  only one of these sections is expanded   The better solution  I think would be to have it so that when keys is expanded  the buttons to the right move down to the bottom of the keys div  and when attributes is expanded  the edit details button moves to the bottom of that div  Is this possible  I have already tried to do it by letting the buttons stack on top of each other and changing their relative locations through css  but that didn t work because when one of the sections was expanded  the other buttons ended up in awkward spots in the middle of the expanded section   Lastly  I would like to try to do this without the accordion style behavior as mentioned on twitter s bootstrap page  but if someone can convince me from a design standpoint that it is preferable  I would certainly reconsider

User · Answer

Use this       panel-defaul ph   on  show bs collapse   function            this  children   panel-heading   addClass  panel-heading-collapsed              panel-defaul ph   not this  children   panel-collapse   removeClass  in

User · Answer

In bootstrap 4 to close all collapseds works like this:

ACTION:

<button id="CloseAll" class="btn btn-primary" type="button" data-toggle="collapse">Close All</button>

JQUERY:

$(document).ready(function() {
    $("#CloseAll").on('click', function() {
        $(".collapse").removeClass("show");
    });
});

User · Answer

The Method Works Properly For me     var lanopt       language-option     lanopt on  show bs collapse    collapse   function       lanopt find   collapse in   collapse  hide

User · Answer

If you are using Bootstrap 4  and you don t want to change your markup   var  myGroup       myGroup     myGroup on  show bs collapse    collapse   function      myGroup find   collapse show   collapse  hide

User · Answer

This was helpful for me       jQuery  button   click  function e        jQuery   in   collapse  hide          It s collapsed already open section  Thnks to GrafiCode Studio

User · Answer

If you don t want to change your markup  this function does the trick   jQuery  button   click  function e        jQuery   collapse   collapse  hide          Whenever a BUTTON is clicked  all sections become collapsed  Then bootstrap opens the one you selected

User · Answer

Bootstrap 3 example with side by side buttons below the content   x000D   x000D   panel-heading   x000D    display  inline-block  x000D    x000D   x000D   panel-group  panel  panel   x000D    margin  0  x000D    border  0  x000D    x000D   x000D   panel   x000D    border  0  important  x000D    -webkit-box-shadow  none  important  x000D    box-shadow  none  important  x000D    background-color  transparent  important  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D   x000D   lt  -- Latest compiled and minified CSS -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   x000D   lt  -- Latest compiled and minified JavaScript -- gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  integrity  sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   x000D   lt div class  panel-group  id  accordion  gt  x000D       lt div class  panel panel-default  gt  x000D           lt div id  collapse1  class  panel-collapse collapse in  gt  x000D               lt div class  panel-body  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  x000D          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  x000D          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D       lt div class  panel panel-default  gt  x000D           lt div id  collapse2  class  panel-collapse collapse  gt  x000D               lt div class  panel-body  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  x000D          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  x000D          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D       lt div class  panel panel-default  gt  x000D           lt div id  collapse3  class  panel-collapse collapse  gt  x000D               lt div class  panel-body  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  x000D          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  x000D          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   lt div class  panel-heading  gt  x000D       lt h4 class  panel-title  gt  x000D           lt a data-toggle  collapse  data-parent   accordion  href   collapse1  gt Collapsible Group 1 lt  a gt  x000D       lt  h4 gt  x000D   lt  div gt  x000D   lt div class  panel-heading  gt  x000D       lt h4 class  panel-title  gt  x000D           lt a data-toggle  collapse  data-parent   accordion  href   collapse2  gt Collapsible Group 2 lt  a gt  x000D       lt  h4 gt  x000D   lt  div gt  x000D   lt div class  panel-heading  gt  x000D       lt h4 class  panel-title  gt  x000D           lt a data-toggle  collapse  data-parent   accordion  href   collapse3  gt Collaple Group 3 lt  a gt  x000D       lt  h4 gt  x000D   lt  div gt  x000D   x000D   x000D    Bootstrap 3 example with side by side buttons above the content   x000D   x000D   panel-heading   x000D    display  inline-block  x000D    x000D   x000D   panel-group  panel  panel   x000D    margin  0  x000D    border  0  x000D    x000D   x000D   panel   x000D    border  0  important  x000D    -webkit-box-shadow  none  important  x000D    box-shadow  none  important  x000D    background-color  transparent  important  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D   x000D   lt  -- Latest compiled and minified CSS -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   x000D   lt  -- Latest compiled and minified JavaScript -- gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  integrity  sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt div class  panel-heading  gt  x000D       lt h4 class  panel-title  gt  x000D           lt a data-toggle  collapse  data-parent   accordion  href   collapse1  gt Collapsible Group 1 lt  a gt  x000D       lt  h4 gt  x000D   lt  div gt  x000D   lt div class  panel-heading  gt  x000D       lt h4 class  panel-title  gt  x000D           lt a data-toggle  collapse  data-parent   accordion  href   collapse2  gt Collapsible Group 2 lt  a gt  x000D       lt  h4 gt  x000D   lt  div gt  x000D   lt div class  panel-heading  gt  x000D       lt h4 class  panel-title  gt  x000D           lt a data-toggle  collapse  data-parent   accordion  href   collapse3  gt Collaple Group 3 lt  a gt  x000D       lt  h4 gt  x000D   lt  div gt  x000D   lt div class  panel-group  id  accordion  gt  x000D       lt div class  panel panel-default  gt  x000D           lt div id  collapse1  class  panel-collapse collapse in  gt  x000D               lt div class  panel-body  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  x000D          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  x000D          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D       lt div class  panel panel-default  gt  x000D           lt div id  collapse2  class  panel-collapse collapse  gt  x000D               lt div class  panel-body  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  x000D          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  x000D          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D       lt div class  panel panel-default  gt  x000D           lt div id  collapse3  class  panel-collapse collapse  gt  x000D               lt div class  panel-body  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  x000D          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  x000D          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

working like a charm here for bootstrap 4 4 1 1  var myGroup      your-list     myGroup on  show bs collapse    collapse   function        myGroup find   collapse show   collapse  hide

User · Answer

If you stick to HTML structure and proper selectors according to the Bootstrap convention, you should be alright.

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
</div>

DEMO

User · Answer

Using data-parent  first solution is to stick to the example selector architecture   lt div id  myGroup  gt       lt button class  btn dropdown  data-toggle  collapse  data-target   keys  data-parent   myGroup  gt  lt i class  icon-chevron-right  gt  lt  i gt  Keys   lt span class  badge badge-info pull-right  gt X lt  span gt  lt  button gt       lt button class  btn dropdown  data-toggle  collapse  data-target   attrs  data-parent   myGroup  gt  lt i class  icon-chevron-right  gt  lt  i gt  Attributes lt  button gt       lt button class  btn dropdown  data-toggle  collapse  data-target   edit  data-parent   myGroup  gt  lt i class  icon-chevron-right  gt  lt  i gt  Edit Details lt  button gt        lt div class  accordion-group  gt           lt div class  collapse indent  id  keys  gt              keys          lt  div gt            lt div class  collapse indent  id  attrs  gt              attrs          lt  div gt            lt div class  collapse  id  edit  gt              edit          lt  div gt       lt  div gt   lt  div gt    Demo  jsfiddle   Second solution is to bind on the events and hide the other collapsible elements yourself   var  myGroup       myGroup     myGroup on  show bs collapse    collapse   function          myGroup find   collapse in   collapse  hide          Demo  jsfiddle   PS  the strange effect in the demos is caused by the min-height set for the example  just ignore that     Edit  changed the JS event from show to show bs collapse as specified in Bootstrap documentation

User · Answer

On Bootstrap5

Like noticed in the docu you can use the "data-bs-parent=.." attribute

If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). The attribute has to be set on the target collapsible area.

see more in bootstrap5 docu

User · Answer

For Bootstrap v4 1   Add the data-parent attribute to the collapse elements instead on the button    lt div id  myGroup  gt   lt button class  btn dropdown  data-toggle  collapse  data-target   keys  gt  lt i class  icon-chevron-right  gt  lt  i gt  Keys   lt span class  badge badge-info pull-right  gt X lt  span gt  lt  button gt   lt button class  btn dropdown  data-toggle  collapse  data-target   attrs  gt  lt i class  icon-chevron-right  gt  lt  i gt  Attributes lt  button gt   lt button class  btn dropdown  data-toggle  collapse  data-target   edit  gt  lt i class  icon-chevron-right  gt  lt  i gt  Edit Details lt  button gt    lt div class  accordion-group  gt       lt div class  collapse indent  id  keys   data-parent   myGroup  gt          keys      lt  div gt        lt div class  collapse indent  id  attrs   data-parent   myGroup  gt          attrs      lt  div gt        lt div class  collapse  id  edit   data-parent   myGroup  gt          edit      lt  div gt   lt  div gt

[twitter-bootstrap] Bootstrap: Collapse other sections when one is expanded

The answer is

Examples related to twitter-bootstrap

Examples related to collapse

Tags