Bootstrap 3 Tabs Data only showing on first tab - javascript

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/

Related

Bootstrap Collapse Accordion: Opening a panel by JavaScript does not close other open panels

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>

Bootstrap Collapse Show Method - Prevent from jumping to section?

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>

Multiple bootstrap accordion panels - only one open at a time

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>

Two dynamically generated bootstrap accordions conflicting with each other

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

Adding a class and clearing all other instances of elements that are not siblings

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');
}
});

Categories

Resources