Bootstrap Collapse. How to expand only one div at a time

Question

how can I go about showing one at a time?

Demo: http://jsfiddle.net/tvvq59wv/

$('.collapser').click(function() {
  $(this).next().collapse('toggle');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="myGroup">
  <div aria-controls="collapseExample" aria-expanded="false" data-toggle="collapse" class=" row collapsed collapser" style="background: #ddd;">
    <div class="col-md-4 col-xs-4">asfa asf asfasf afsf afsasf asf asf asf adf</div>
    <div class="col-md-4 col-xs-4">test</div>
    <div class="col-md-4 col-xs-4" style="text-align: right;">asf afsas afsasf asf</div>
  </div>

  <div id="collapseExample" class="collapse" style="height: 0px;">
    <div class="well">asf t1</div>
  </div>

  <div aria-controls="collapseExample" aria-expanded="false" data-toggle="collapse" class=" row collapsed collapser" style="background: #ddd;">
    <div class="col-md-4 col-xs-4">asfa afsasf</div>
    <div class="col-md-4 col-xs-4">test sd sdgs sd asf asfas afasf asfasfgd</div>
    <div class="col-md-4 col-xs-4" style="text-align: right;">asf afsas afsasf asf</div>
  </div>

  <div id="collapseExample" class="collapse" style="height: 0px;">
    <div class="well">asf t1</div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Thanks in advance!

Answer 1

Bootstrap Accordion. jQuery vs HTML-attributes

There are two ways to solve your issue. You can use Javascript or assign HTML-attributes. But first we have simplify the code.

Start point

1. col-md-4 col-xs-4 is equal to col-xs-4.
2. Bootstrap contains alignment classes. You can use the text-right class instead of style="text-align: right;".
3. Note that the .row class has properties margin-right: -15px; margin-left: -15px;. You need to place .row within a .container or .container-fluid.
4. style="height: 0px;" is unnecessary. The collapse class set the display property as none.
5. id must be unique.

Let us start with this code:

https://jsfiddle.net/glebkema/a5q9mgho/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.text {
  margin-bottom: 20px;
  padding: 15px;
}

.mauve { background: #c9f }
.mint  { background: #9fc }
.peach { background: #fc9 }

.text.mauve { background: #edf }
.text.mint  { background: #dfe }
.text.peach { background: #fed }

<div id="myGroup" class="container">

  <div class="row mint">
    <div class="col-xs-4">left</div>
    <div class="col-xs-4 text-center">center</div>
    <div class="col-xs-4 text-right">right</div>
  </div>
  <div class="row">
    <div class="text mint">text</div>
  </div>

  <div class="row mauve">
    <div class="col-xs-4">left</div>
    <div class="col-xs-4 text-center">center</div>
    <div class="col-xs-4 text-right">right</div>
  </div>
  <div class="row">
    <div class="text mauve">text</div>
  </div>

  <div class="row peach">
    <div class="col-xs-4">left</div>
    <div class="col-xs-4 text-center">center</div>
    <div class="col-xs-4 text-right">right</div>
  </div>
  <div class="row">
    <div class="text peach">text</div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

By jQuery

1. Add the .toggle class to rows. These blocks will toggle the state of the neighboring blocks.
2. Use the .collapse class to make blocks collapsible.
3. The script does two actions:
   • Hide all expanded divs except the next one.
   • Toggle the next div.

http://jsfiddle.net/glebkema/73gtkvjt/

$('.toggle').click(function() {
  if ( !$(this).next().hasClass('in') ) {
    $(this).parent().children('.collapse.in').collapse('hide');
  }
  $(this).next().collapse('toggle');
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.text {
  margin-bottom: 20px;
  padding: 15px;
}

.mauve { background: #c9f }
.mint  { background: #9fc }
.peach { background: #fc9 }

.text.mauve { background: #edf }
.text.mint  { background: #dfe }
.text.peach { background: #fed }

<div id="myGroup" class="container">

  <div class="row mint toggle">
    <div class="col-xs-4">left</div>
    <div class="col-xs-4 text-center">center</div>
    <div class="col-xs-4 text-right">right</div>
  </div>
  <div class="row collapse in">
    <div class="text mint">text</div>
  </div>

  <div class="row mauve toggle">
    <div class="col-xs-4">left</div>
    <div class="col-xs-4 text-center">center</div>
    <div class="col-xs-4 text-right">right</div>
  </div>
  <div class="row collapse">
    <div class="text mauve">text</div>
  </div>

  <div class="row peach toggle">
    <div class="col-xs-4">left</div>
    <div class="col-xs-4 text-center">center</div>
    <div class="col-xs-4 text-right">right</div>
  </div>
  <div class="row collapse">
    <div class="text peach">text</div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

By HTML-attributes

N.B. This method works in conjunction the panel component. Collapsible blocks must to be children of the block, which has the panel class.

1. Wrap all blocks in <div class="panel"></div>.
2. Use the .collapse class to make blocks collapsible. Give these blocks unique ids.
3. Add a set of attributes to each toggle block:

role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"

https://jsfiddle.net/glebkema/L02ao1n9/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.panel {
  border: 0;
  margin-bottom: 0;
}

.text {
  margin-bottom: 20px;
  padding: 15px;
}

.mauve { background: #c9f }
.mint  { background: #9fc }
.peach { background: #fc9 }

.text.mauve { background: #edf }
.text.mint  { background: #dfe }
.text.peach { background: #fed }

<div id="myGroup" class="container">
  <div class="panel">

    <div class="row mint" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
      <div class="col-xs-4">left</div>
      <div class="col-xs-4 text-center">center</div>
      <div class="col-xs-4 text-right">right</div>
    </div>
    <div id="collapseOne" class="row collapse in">
      <div class="text mint">text</div>
    </div>

    <div class="row mauve" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      <div class="col-xs-4">left</div>
      <div class="col-xs-4 text-center">center</div>
      <div class="col-xs-4 text-right">right</div>
    </div>
    <div id="collapseTwo" class="row collapse">
     <div class="text mauve">text</div>
    </div>
    
    <div class="row peach" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
      <div class="col-xs-4">left</div>
      <div class="col-xs-4 text-center">center</div>
      <div class="col-xs-4 text-right">right</div>
    </div>
    <div id="collapseThree" class="row collapse">
      <div class="text peach">text</div>
    </div>
    
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>