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>
Related
I have an accordion which uses Bootstrap Collapse. When I click on any panel, it opens it and closes other open panels. But when I try to open a panel using JavaScript, other open panels does not close automatically.
function openBreakfast() {
$('#add-breakfast-form').collapse('show');
}
function openLunch() {
$('#add-lunch-form').collapse('show');
}
function openDinner() {
$('#add-dinner-form').collapse('show');
}
function openSnacks() {
$('#add-snacks-form').collapse('show');
}
body {
padding: 20px;
}
.m-t-20 {
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="food-tracker-accordion" role="tablist" class="panel-group m-t-20">
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-breakfast-form">Add Breakfast</a>
</h4>
</div>
<div id="add-breakfast-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Breakfast form
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-lunch-form">Add Lunch</a>
</h4>
</div>
<div id="add-lunch-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Lunch form
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-dinner-form">Add Dinner</a>
</h4>
</div>
<div id="add-dinner-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Dinner form
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-snacks-form">Add Snacks</a>
</h4>
</div>
<div id="add-snacks-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Snacks form
</div>
</div>
</div>
</div>
<div class="m-t-20">
<button onclick="openBreakfast()">Open Breakfast</button>
<button onclick="openLunch()">Open Lunch</button>
<button onclick="openDinner()">Open Dinner</button>
<button onclick="openSnacks()">Open Snacks</button>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Another interesting thing is that if I click on any panel to close, opening that panel by JavaScript closes all other open panels.
All you need to do is hide the panel which is opened before and you can do it by using $('.panel-collapse.in').collapse('hide'); like this
function openBreakfast() {
$('.panel-collapse.in').collapse('hide');
$('#add-breakfast-form').collapse('show');
}
function openLunch() {
$('.panel-collapse.in').collapse('hide');
$('#add-lunch-form').collapse('show');
}
function openDinner() {
$('.panel-collapse.in').collapse('hide');
$('#add-dinner-form').collapse('show');
}
function openSnacks() {
$('.panel-collapse.in').collapse('hide');
$('#add-snacks-form').collapse('show');
}
body {
padding: 20px;
}
.m-t-20 {
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="food-tracker-accordion" role="tablist" class="panel-group m-t-20">
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-breakfast-form">Add Breakfast</a>
</h4>
</div>
<div id="add-breakfast-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Breakfast form
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-lunch-form">Add Lunch</a>
</h4>
</div>
<div id="add-lunch-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Lunch form
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-dinner-form">Add Dinner</a>
</h4>
</div>
<div id="add-dinner-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Dinner form
</div>
</div>
</div>
<div class="panel panel-default">
<div role="tab" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#food-tracker-accordion" href="#add-snacks-form">Add Snacks</a>
</h4>
</div>
<div id="add-snacks-form" role="tabpanel" class="panel-collapse collapse">
<div class="panel-body">
Add Snacks form
</div>
</div>
</div>
</div>
<div class="m-t-20">
<button onclick="openBreakfast()">Open Breakfast</button>
<button onclick="openLunch()">Open Lunch</button>
<button onclick="openDinner()">Open Dinner</button>
<button onclick="openSnacks()">Open Snacks</button>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I'm fairly new to bootstraps and I am currently trying to add an onclick event for a button, which would only open my main bootstrap panel.
Here's the part of the HTML code where my bootstrap panels are located;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel-groupMain">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Main panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!-- Sub panels -->
<div class="panel-group" id="accordion">
<!-- Sub panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentOne"></p>
</div>
</div>
</div>
<!-- Sub panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="day" data-name="Tuesday"></div>
<p id="contentTwo"></p>
</div>
</div>
</div>
<!-- Sub panel 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sub panel 3</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentThree"></p>
</div>
</div>
</div>
<!-- Sub panel 4 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Sub panel 4</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFour"></p>
</div>
</div>
</div>
<!-- Sub panel 5 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 5</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFive"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As for the glyphicons I've tried this code, but it only toggles the change when you open/close the same sub panel, so is there any easy way for the glyphicon to change when you open different sub panels?
$(document).ready(function () {
$('[data-toggle="collapse"]').click(function () {
$(this).find('span').toggleClass('glyphicon-chevron-
down').toggleClass('glyphicon-chevron-up');
});
});
Any help is appreciated.
Here you go with a solution https://jsfiddle.net/mc3z6ad3/2/
$('a[data-toggle="collapse"]').click(function(){
if( $(this).closest('div.panel-heading').next('div.collapse').hasClass('in')){
$(this).next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}else{
$('a[data-toggle="collapse"]').next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
$(this).next('span').addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
}
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel-groupMain">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Main panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!-- Sub panels -->
<div class="panel-group" id="accordion">
<!-- Sub panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentOne"></p>
</div>
</div>
</div>
<!-- Sub panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="day" data-name="Tuesday"></div>
<p id="contentTwo"></p>
</div>
</div>
</div>
<!-- Sub panel 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sub panel 3</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentThree"></p>
</div>
</div>
</div>
<!-- Sub panel 4 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Sub panel 4</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFour"></p>
</div>
</div>
</div>
<!-- Sub panel 5 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 5</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFive"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
$('a[data-toggle="collapse"]').click(function(){
if( $(this).closest('div.panel-heading').next('div.collapse').hasClass('in')){
$(this).next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}else{
$('a[data-toggle="collapse"]').next('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
$(this).next('span').addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel-groupMain">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Main panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!-- Sub panels -->
<div class="panel-group" id="accordion">
<!-- Sub panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentOne"></p>
</div>
</div>
</div>
<!-- Sub panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="day" data-name="Tuesday"></div>
<p id="contentTwo"></p>
</div>
</div>
</div>
<!-- Sub panel 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sub panel 3</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentThree"></p>
</div>
</div>
</div>
<!-- Sub panel 4 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Sub panel 4</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFour"></p>
</div>
</div>
</div>
<!-- Sub panel 5 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 5</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFive"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The span wasn't inside the a so you need to navigate up to the parent and find from there. I added parent() to your line of code. I also added logic to reset other heading panels
I want to make a cookie, when somebody click on bootstrap accordion panel.
Thanks
You can simply set a cookie in Javascript with document.cookie = 'value';
Add the code to the click event on the accordion panel.
Note: iff that's the part you're stuck at, add your code :)
yes i found solution for that
<script>
$(".openpanel").on("click", function() {
$("#panel3").collapse('show');
$.cookie("test", 1);
});
$(".closepanel").on("click", function() {
$("#panel3").collapse('hide');
});
/* ensure any open panels are closed before showing selected */
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
</script>
<button type="button" class="btn openpanel">Open panel 3</button>
<button type="button" class="btn closepanel">Close panel 3</button>
<hr>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel 1</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 2</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Panel 3</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 3
</div>
</div>
</div>
</div>
Thanks
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>
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/