How do you make a panel collapse when pressing a normal bootstrap button? Here's my code:
<div class="panel panel-primary" style="border-color: #464646;">
<div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
<div style="float: left; margin-top: 5px;" data-toggle="collapse" href="#collapse1">Select Object</div>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!--Object Buttons-->
<button *ngFor="let object of objects" type="button" data-toggle="collapse" style="margin-right: 10px;" class="btn btn-primary" (click)="doThings();"</button>
</div>
</div>
</div>
The panel-body will collapse when I click the panel-heading, but I would like to have the panel-body collapse when clicking one of the 'object' buttons.
You can apply the same data-target="#collapse1" to the button as the href has.
href
<a data-toggle="collapse" href="#collapse1">Select Object</a>
Button
<button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse1">
Also, your button isn't closed. missing > to close it.
<button *ngFor="let object of objects" type="button" data-toggle="collapse" style="margin-right: 10px;" class="btn btn-primary" (click)="doThings();"
Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Select Object</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse1">
Button with the same data-target
</button> Panel Body
</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Select Object</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse2">
Button with the same data-target
</button> Panel Body
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Related
I am trying something to accomplish my requirement with collapsible panel
$(".sport").on("click", function() {
var thisId = $(this).attr("id");
var thisChildren = $(this) + ".sportlist";
$(thisChildren).each(function(index) {
});
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div style="height:600px;padding:0px;margin:0px;">
<div class="col-md-3 scroll-container" style="padding:0px;">
<div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse1" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Cricket (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse1" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="1">
Sachin
</div>
<div class="sportlist" data-value="2">
Kohli
</div>
</div>
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse2" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Other (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse2" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="3">
Bob
</div>
<div class="sportlist" data-value="4">
Willson
</div>
</div>
</div>
</div>
</div>
</div>
What I need is when I click on Cricket I need to store the data-value to an array. I tried something but couldn't accomplish
$(".sport").on("click", function() {
var thisId = $(this).attr("id");
var thisChildren = $(this) + ".sportlist";
$(thisChildren).each(function(index) {
});
});
Use the hreffrom a along with $.map:
$(".sport").on("click", function() {
let id = $(this).attr("href")
, list = $.map($(id).find(".sportlist"), function(item){
return $(item).data("value")
})
console.log(list)
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div style="height:600px;padding:0px;margin:0px;">
<div class="col-md-3 scroll-container" style="padding:0px;">
<div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse1" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Cricket (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse1" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="1">
Sachin
</div>
<div class="sportlist" data-value="2">
Kohli
</div>
</div>
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse2" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Other (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse2" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="3">
Bob
</div>
<div class="sportlist" data-value="4">
Willson
</div>
</div>
</div>
</div>
</div>
</div>
Here is another approach without using id
$(".sport").click(function () {
let ids = $.map($(this).closest(".panel-heading").next(".panel-collapse").find(".sportlist"), function (element) {
return $(element).data("value")
});
console.log(ids)
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div style="height:600px;padding:0px;margin:0px;">
<div class="col-md-3 scroll-container" style="padding:0px;">
<div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse1" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Cricket (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse1" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="1">
Sachin
</div>
<div class="sportlist" data-value="2">
Kohli
</div>
</div>
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a class="sport collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse2" aria-expanded="true">
<small><i class="more-less glyphicon glyphicon-chevron-right"></i></small> Other (2 items)
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapse2" role="tabpanel" style="height: 0px;">
<div class="sportlist" data-value="3">
Bob
</div>
<div class="sportlist" data-value="4">
Willson
</div>
</div>
</div>
</div>
</div>
</div>
jQuery closes - For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
jQuery next - Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
jQuery find - Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
jQuery map - Pass each element in the current matched set through a
function, producing a new jQuery object containing the return values.
I'm trying to figure out why my bootstrap accordions won't collapse when another has been opened. I coded it two separate way based on other stackoverflow examples I've seen, as well as bootstrap's docs and I still can't figure out why it's not functioning properly. Bootstrap JS is 3.3.7
The idea is that despite whatever <a class="button collapsed"> is clicked, only that content is displayed, the rest should hide.
Example 1 uses separate panel groups
js fiddle DEMO
<div data-quickedit-entity-id="paragraph/84" class="panel-group" id="accordion-84" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-abc">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-84" href="#abc-1" aria-expanded="false" aria-controls="abc-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-84" href="#abc-2" aria-expanded="false" aria-controls="abc-2">btn2
</a>
</div>
</div>
</div>
<div id="abc-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-abc" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
test2
</div>
</div>
<div id="abc-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-abc" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
test3
</div>
</div>
</div>
</div>
<div data-quickedit-entity-id="paragraph/87" class="panel-group" id="accordion-87" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-def">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-87" href="#def-1" aria-expanded="false" aria-controls="def-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-87" href="#def-2" aria-expanded="false" aria-controls="def-2">btn2
</a>
</div>
</div>
</div>
<div id="def-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-def">
<div class="panel-body">
test
</div>
</div>
<div id="def-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-def">
<div class="panel-body">
test2
</div>
</div>
</div>
</div>
Example 2 uses the same panel-group
js fiddle DEMO
<div data-quickedit-entity-id="paragraph/90" class="panel-group" id="accordion-90" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-tes">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#tes-1" aria-expanded="false" aria-controls="tes-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#tes-2" aria-expanded="false" aria-controls="tes-2">btn2
</a>
</div>
</div>
</div>
<div id="tes-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test1</p>
</div>
</div>
<div id="tes-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test2</p>
</div>
</div>
</div>
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-test2">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#test2-1" aria-expanded="false" aria-controls="test2-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#test2-2" aria-expanded="false" aria-controls="test2-2">btn2
</a>
</div>
</div>
</div>
<div id="test2-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test21</p>
</div>
</div>
<div id="test2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test23</p>
</div>
</div>
</div>
</div>
The code below should work as you would expect.
I think the reason it wasn't working before is because you didn't have the id selector in the "data-parent" attribute.
<div data-quickedit-entity-id="paragraph/90" class="panel-group" id="accordion-90" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-tes">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#tes-1" aria-expanded="false" aria-controls="tes-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#tes-2" aria-expanded="false" aria-controls="tes-2">btn2
</a>
</div>
</div>
</div>
<div id="tes-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test1</p>
</div>
</div>
<div id="tes-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test2</p>
</div>
</div>
</div>
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-test2">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#test2-1" aria-expanded="false" aria-controls="test2-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#test2-2" aria-expanded="false" aria-controls="test2-2">btn2
</a>
</div>
</div>
</div>
<div id="test2-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test21</p>
</div>
</div>
<div id="test2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test23</p>
</div>
</div>
</div>
</div>
I am using accordion tabs in my web application and in that I am facing an issue, each tab opens when i press the "Continue" button which is present in all the tabs.
Here the issue is, when I manually toggle from the 5th tab to the 4th tab and return to the 5th tab by pressing continue button, the Javascript scripts which are written in the 5th tab are completely not working. Even a simple alert() is not working. This happens only when we toggle the tabs manually.
Need help in fixing this. TIA
$(".button").click(function(){
$(this).closest(".panel-default").find(".panel-collapse").removeClass("in");
$(this).closest(".panel-default").next().find(".panel-collapse").addClass("in");
});
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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">
<input type="button" class="btn btn-default button" value="continue"/>
</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">
<input type="button" class="btn btn-default button" value="continue2"/>
</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">
<input type="button" class="btn btn-default button" value="continue3"/>
</div>
</div>
</div>
</div>
I'm using the bootstrap accordion as a unique way of creating a form. Basically the form has 7 parts each in its own accordion panel. Right now I have it just as I want where they are all collapsed and when you open the first accordion there is a button that links to the second accordion. This is exactly how I want it to work. However is there a way to hide the other accordion panels until the "next" button has been selected?
For example when I load the page I just want them to be able to see " 1. Select Features " and when they open that and select their items when they press the next button thats when the second panel becomes visible and opens up. and so on.
I'm assuming I can maybe do something where I have them hidden and the button triggers it to be visible? I've been looking for examples of something like this but I can't find anything. I know this site isn't a code writing service so if someone can just point me to the right direction I can do the rest.
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. Select Features </a> </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Testing 1
<button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button>
</div>
</div>
</div>
<div class="panel panel-default" id="panel2">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 2. Select Styles </a> </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Testing 2
<button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button>
</div>
</div>
</div>
<div class="panel panel-default" id="panel3">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 3. Contact Info </a> </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Testing 3
<button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button>
</div>
</div>
</div>
</div>
I recreated it in JSFiddle so you can see what I'm talking about and play with it.
Fiddle HERE
You can hide the divs you want for the first time on ready function using hide() method, e.g :
$('#panel2, #panel3').hide();
After that you should add an identifier id to every button next then attach a click event to it to control your accordion like you want on every click.
$('body').on('click', '#btn-next-id', function(){
//Here show hide divs you want
})
Hope this helps.
Snippet
$(function(){
//Hide other steps for the first time
$('#panel2, #panel3').hide();
$('body').on('click', '#next1', function(){
$('#panel2').show();
})
$('body').on('click', '#next2', function(){
$('#panel3').show();
})
})
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
I'm using the bootstrap accordion.
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. CHOOSE YOUR INDUSTRY </a> </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Testing 1
<button id="next1" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button>
</div>
</div>
</div>
<div class="panel panel-default" id="panel2">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 2. STANDARD FEATURES </a> </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Testing 2
<button id="next2" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button>
</div>
</div>
</div>
<div class="panel panel-default" id="panel3">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 3. REAL ESTATE FEATURES </a> </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Testing 3
<button id="next3" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button>
</div>
</div>
</div>
</div>
I'm not sure if this is exactly what you're looking for but how about simply removing the anchor element from step 2 and step 3's headings so a user can't click them to open them? Updated fiddle here: https://jsfiddle.net/DTcHh/15338/
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. CHOOSE YOUR INDUSTRY </a> </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Testing 1
<button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button>
</div>
</div>
</div>
<div class="panel panel-default" id="panel2">
<div class="panel-heading">
<h4 class="panel-title"> 2. STANDARD FEATURES </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Testing 2
<button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button>
</div>
</div>
</div>
<div class="panel panel-default" id="panel3">
<div class="panel-heading">
<h4 class="panel-title"> 3. REAL ESTATE FEATURES </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Testing 3
<button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button>
</div>
</div>
</div>
</div>
You even add a "Previous" button to steps 2 and 3 so they can go back up the process? Updated fiddle here for this here: https://jsfiddle.net/DTcHh/15339/
i've got a question.
Is there any way to collapse and switch back bootstrap panel programmatically.
<div class="panel panel-default panel-primary">
<div class="panel-heading">
...
<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#to">
<i class="fa fa-chevron-down fa-fw"></i>
</button>
</div>
</div>
</div>
<div id="to" class="panel-body collapse">....</div>
</div>
I need to collapse it or expand with some handler.
Try this:
<div class="panel panel-default panel-primary">
<div class="panel-heading">
...
<div class="pull-right">
<div class="btn-group">
</div>
</div>
</div>
<div id="to" class="panel-body collapse">....</div>
</div>
<button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#to">
<i class="fa fa-chevron-down fa-fw"></i> Click me
</button>
DEMO