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!
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
col-md-4 col-xs-4 is equal to col-xs-4.- Bootstrap contains alignment classes. You can use the
text-right class instead of style="text-align: right;". - Note that the
.row class has properties margin-right: -15px; margin-left: -15px;. You need to place .row within a .container or .container-fluid. style="height: 0px;" is unnecessary. The collapse class set the display property as none.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
- Add the
.toggle class to rows. These blocks will toggle the state of the neighboring blocks. - Use the
.collapse class to make blocks collapsible. - 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.
- Wrap all blocks in
<div class="panel"></div>. - Use the
.collapse class to make blocks collapsible. Give these blocks unique ids. - 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>
