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/
Related
How can I prevent page from jumping to section with has hash id when manually triggering the .collapse('show') method?
For example when I have the following url
http:example.com/page.php?#collapseOne
I use the following jquery which will expand the section with the hash id but it also jumps to that section.
var anchor = window.location.hash;
$(".collapse").collapse('hide');
$(anchor).collapse('show');
// this doesnt work becuase the .collapse('show') seems to overide it
if (location.hash) {
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
}
How can i prevent it from jumping to that section when I manually call `.collapse('show') as in the example above - all I want to do is open it not jump to it?
Html code:
<div class="panel-group" id="accordion" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Lorem ipsum
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingTwo">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Lorem ipsum
</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 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>
On my page I have 4 different divs. Each of them has own jstree with data from external json files.
<div class="panel frame">
<div class="panel-heading" role="tab" id="headingCorporate">
<p class="panel-title" align="center">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseCorporate" aria-expanded="false" aria-controls="collapseCorporate">
Corporate Frame <span class="caret pull-right"></span>
</a>
</p>
</div>
<div id="collapseCorporate" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCorporate">
<div class="panel-body">
<js-tree tree-data="json" tree-src="data-tree/corporate.json"
tree-plugins="contextmenu,dnd,types,wholerow,search,state"
tree-events="changed:callback;"></js-tree>
</div>
</div>
</div>
<div class="panel frame">
<div class="panel-heading" role="tab" id="headingClinical">
<p class="panel-title panel-primary" align="center">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseClinical" aria-expanded="false" aria-controls="collapseClinical">
Clinical Hierarchy Frame <span class="caret pull-right"></span>
</a>
</p>
</div>
<div id="collapseClinical" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingClinical">
<div class="panel-body">
<js-tree tree-data="json" tree-src="data-tree/clinical.json"
tree-plugins="contextmenu,dnd,types,wholerow,search,state"
tree-events="changed:callback;"></js-tree>
</div>
</div>
</div>
<div class="panel frame">
<div class="panel-heading" role="tab" id="headingStudy">
<p class="panel-title" align="center">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseStudy" aria-expanded="false" aria-controls="collapseStudy">
Study Frame <span class="caret pull-right"></span>
</a>
</p>
</div>
<div id="collapseStudy" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingStudy">
<div class="panel-body">
<js-tree tree-data="json" tree-src="data-tree/study.json"
tree-plugins="contextmenu,dnd,types,wholerow,search,state"
tree-events="changed:callback;"></js-tree>
</div>
</div>
</div>
<div class="panel frame">
<div class="panel-heading" role="tab" id="headingIndustry">
<p class="panel-title" align="center">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseIndustry" aria-expanded="false" aria-controls="collapseIndustry">
Industry Frame <span class="caret pull-right"></span>
</a>
</p>
</div>
<div id="collapseIndustry" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingIndustry">
<div class="panel-body">
<js-tree tree-data="json" tree-src="data-tree/industry.json"
tree-plugins="contextmenu,dnd,types,wholerow,search,state"
tree-events="changed:callback;"></js-tree>
</div>
</div>
</div>
I need to drag and drop this divs. The example of ngDraggable directive is pretty close what I want to do, but it's still require ng-repeat. So my question is there any way to make draggable and sortable list of 4 different divs without ng-repeat?