Working in Angular here, the application has the ability to open multiple "panes" within one browser tab. These panes essentially function like their own browser tab. I've got a bootstrap accordion, using the standard sort of bootstrap setup:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionOne"></a>
</div>
<div id="accordionOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="">CONTENT</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo"></a>
</div>
<div id="accordionTwo" class="panel-collapse collapse in">
<div class="panel-body">
<div class="">CONTENT 2</div>
</div>
</div>
</div>
</div>
Issue here is that because of the multiple panes, there is the potential that a user could open 2 panes to the same area and render this accordion twice. Doing so means that clicking any element on the second rendered accordion will only control the first accordion.
See this fiddle for example
Since I have no idea how many times the user could generate this "pane" at once, is there a good approach for tackling this sort of thing?
Note: I know why this is happening, with the data-targets and all. This is a question on how to solve that dynamically.
Tangentially related
They should have unique ID attributes. Change the 2nd to accordion2 or some other unique identifier. All of the panels must have unique ID's too. If they're dynamically generated, that logic must change to generate unique id's instead of using the same id over again with each iteration.
http://www.bootply.com/85EJ8o0bWu
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionOne">Section One</a>
</div>
<div id="accordionOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="">CONTENT</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">Section 2</a>
</div>
<div id="accordionTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT 2</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">Section 3</a>
</div>
<div id="accordionThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT 3</div>
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#accordionOne2">Section One</a>
</div>
<div id="accordionOne2" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#accordionTwo2">Section 2</a>
</div>
<div id="accordionTwo2" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT 2</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#accordionThree2">Section 3</a>
</div>
<div id="accordionThree2" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT 3</div>
</div>
</div>
</div>
</div>
If you're specifically looking to understand iteration in Angular, it really depends on how the data is structured, and there are many different approaches with ng-repeat.
Repeating Bootstrap accordions with Angular.
The attribute data-target must be identic as the accordion body id.
See the example:
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-target="#accordionTwo" data-parent="#accordion"></a>
</div>
<div id="accordionTwo" class="panel-collapse collapse in">
<div class="panel-body">
<div class="">CONTENT 2</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 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
I'm using the Bootstrap 3 tabs and accordion within the tabs.
The html I currently have is the following:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">DF</li>
<li role="presentation">HWR</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-panel active" id="1270013">
<div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading30">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapse30" aria-expanded="true" aria-control="collapse30">2015-10-14 13:36:34</a></h4>
</div>
<div id="collapse30" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading30">
<div class="panel-body">
...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading31">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapse31" aria-expanded="true" aria-control="collapse31">2015-10-14 11:46:26</a></h4>
</div>
<div id="collapse31" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading31">
<div class="panel-body">
...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading31">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapse31" aria-expanded="true" aria-control="collapse31">2015-10-14 11:46:26</a></h4>
</div>
<div id="collapse31" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading31">
<div class="panel-body">
...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading32">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapse32" aria-expanded="true" aria-control="collapse32">2015-10-14 09:56:14</a></h4>
</div>
<div id="collapse32" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading32">
<div class="panel-body">
...
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-panel" id="1270015">
<div class="panel-group" id="accordion5" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading50">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion5" href="#collapse50" aria-expanded="true" aria-control="collapse50">2015-10-14 14:08:31</a></h4>
</div>
<div id="collapse50" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading50">
<div class="panel-body">
...
</div>
</div>
</div>
</div>
</div>
</div>
Now this code displays the 2 tabs above, but the data from the second tab will be shown beneath the first tab data.
I can't find the mistake I made why the second tab data won't show in the second tab instead in the first one.
I'm using jQuery 1.9.1 and the current Bootstrap 3 version.
Also I don't have any own written JavaScript, I worked with the data tags within the HTML.
jsFiddle
Change Your Class name
1st tab Content
tab-pane fade in active
2nd tab Content
tab-pane fade
Demo link http://jsfiddle.net/s9s5m3n3/2/
Everything is fine
change the class name of inside content tab .tab-panel to .tab-pane for both #1270013 and #1270015
See fiddle: http://jsfiddle.net/sachinkk/s9s5m3n3/3/
I want to be able to add the class accordion-minus on click, and at the same time clear all instances of the class on all elements except this. Currently it's working, but only if I toggle one by one, if I go from one to another it breaks.
This is my markup:
HTML
<div class="panel-group panel-group-pdp" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title product-accordion-title text-uppercase">
<a id="{{content.static.productDetailsToggleId}}" class="collapsed pdp-accord-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">{{content.static.productDetailsText}}<img class="accordion-plus" src="{{meta.assetsPath}}img/plus79.png" alt="accordion content">
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body panel-body-pdp">
<ul>
{{#each content.product.details}}
<li>{{text}}</li>
{{/each}}
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title product-accordion-title text-uppercase">
<a id="{{content.static.deliveryReturnsToggleId}}" class="collapsed pdp-accord-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">{{content.static.deliveryAndReturnsText}}<img class="accordion-plus" src="{{meta.assetsPath}}img/plus79.png" alt="accordion content">
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body panel-body-pdp">
<p>
{{content.static.standardDeliveryText}}
</p>
<p>
{{content.static.expressDeliveryText}}
</p>
<p>
{{content.static.freeReturnsText}}
</p>
<p>
{{content.static.moreDeliveryInfoText}}
</p>
</div>
</div>
</div>
</div>
JS
$(".pdp-accord-toggle").click(function() {
if($('.accordion-plus').hasClass('accordion-minus') === false) {
// $(this).find('.accordion-plus').not(this).removeClass('accordion-minus');
$(this).find('.accordion-plus').addClass('accordion-minus');
} else {
$(this).find('.accordion-plus').removeClass('accordion-minus');
}
});