Skip to main content

Return to Question

deleted 20 characters in body; edited tags
Source Link
Daniel Widdis
Daniel Widdis
  • 9.3k
  • 13
  • 50
  • 70

howHow 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!

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!

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>

I've added full code to the snippet. And impoeved the title.
Source Link
edit approved Jun 11, 2016 at 6:28
Gleb Kemarsky
edit approved Jun 11, 2016 at 6:28
Gleb Kemarsky
  • 10.5k
  • 7
  • 49
  • 73

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

how can I go about showing one at a time?

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

View demo hereDemo: http://jsfiddle.net/tvvq59wv/1/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 Collapse show one at a time

how can I go about showing one at a time?

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

View demo here: http://jsfiddle.net/tvvq59wv/1/

Thanks in advance!

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

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!

Source Link
user1652920
user1652920
  • 149
  • 2
  • 5
  • 17

Bootstrap Collapse show one at a time

how can I go about showing one at a time?

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

View demo here: http://jsfiddle.net/tvvq59wv/1/

Thanks in advance!