Bootstrap Collapse with multiple button and div
Question
I have seen this example of collapse in w3school
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Collapsible</h2>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
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>
</body>
</html>
but my question is what happens when i want to use 2 button and 2 div, like i have 2 buttons button 1 will be my first button and button 2 wil be my second button and i have 2 div div 1 will be visible when i click on button 1 but when i click on button 2 i want to hide first div and show 2nd div, and the hide second and show first,
here is the code with multiple div
<div class="container" ng-app="myApp" ng-controller="customersCtrl">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Company Details</button>
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo1">Commercial Details</button>
<div id="demo" class="collapse" >
1st div
</div>
<div id="demo1" class="collapse">
2nd div
</div>
</div>
Can anybody help me out
2 answers
solution1
0 2016-11-03 11:45:40
It sounds like using bootstraps accordion would give you the desired effects: http://getbootstrap.com/javascript/#collapse-example-accordion
It will allow you to collapse other divs when opening one, for instance.
solution2
0 2016-11-03 12:05:44
You can use any accordion plugins to achieve this.
If you want to go with a small piece of code, go with this:
$('#btn1').click(function(){ $('.collapse').hide(); $('#demo').show(); }); $('#btn2').click(function(){ $('.collapse').hide(); $('#demo1').show(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container" ng-app="myApp" ng-controller="customersCtrl"> <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo" id="btn1" >Company Details</button> <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo1" id="btn2">Commercial Details</button> <div id="demo" class="collapse" > 1st div </div> <div id="demo1" class="collapse"> 2nd div </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.