I am trying to integrate twitter bootstrap3 accordion in my web project. I have got the accordion to show up in the page, but the collapse and expansion of the accordion does not seems to work correctly. I appreciate if someone can tell me what is that I am doing incorrect.
This is my code
<div class="panel-group" id="accordion" data-bind="foreach:{data:products,afterRender:expand}">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" class=" panel-title colorgrey" data-parent="#accordion" data-bind="attr:{href:link}">
<h4 >
<span data-bind="text:product"></span>
<span id="arrowicon" class="glyphicon glyphicon-large glyphicon-chevron-right pull-right orange paddingbottom"></span>
</h4>
</a>
</div>
<div data-bind="attr:{id:target},foreach:recipes" class="panel-collapse collapse">
<div class="panel-body">
<span data-bind="text:RecipeTitle"></span>
<span id="arrowicon" class="glyphicon glyphicon-large glyphicon-chevron-right pull-right orange paddingbottom"></span>
</div>
</div>
</div>
Related
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
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?
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/
So what I am looking at is:
When you click the header of the collapsable object, then nothing should happen
While $("#collapseOne").collapse('toggle'); or $("#collapseTwo").collapse('toggle'); should succeed
The Collabsable object:
<div class="accordion" id="accordion2">
<div class="accordion-group mzti-transparent-border" id="id-group-1">
<div id="id-header-1" class="accordion-heading mzti-bg-image-1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
</div>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
</div>
</div>
</div>
<div class="accordion-group hide mzti-transparent-border mzti-height" id="id-group-2">
<div id="id-header-2" class="accordion-heading width-100 mzti-bg-image-2 margin-top-22px ">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
</div>
</div>
</div>
</div>
Remove the data-toggle="collapse" on the <a class="accordion-toggle"... elements