I just inserted a Bootstrap collapse into my payment view in Laravel. The Bootstrap collapses when I click on it, But I want it to be collapsed automatically.
I know I have to set this: aria-expanded="false"
But its still not working. Maybe because it has its own id like this?
href="#collapse{{ $charity->id }}"
Here is my full panel snippet:
#foreach($charities as $charity)
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ $charity->id }}" aria-expanded="false" aria-controls="collapseOne">
<div class="row">
<div class="col-xs-3 col-sm-2 col-md-2">
<img class="media-object" src="{{ $charity->photo }}" width="75px" height="65px" alt="{{ $charity->name }}">
</div>
<div class="col-xs-9 col-sm-10 col-md-10">
{{ $charity->name }}
</div>
</div>
</a>
</h4>
</div>
<div id="collapse{{ $charity->id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
{{ $charity->description }}
</div>
</div>
</div>
</div>
#endforeach
If you want the first panel closed on page load, remove the .in class from it.
From this --> <div id="collapse{{ $charity->id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
To this --> <div id="collapse{{ $charity->id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
The collapse plugin utilizes a few classes to handle the heavy
lifting:
.collapse hides the content
.collapse.in shows the content
.collapsing is added when the transition starts, and removed when it finishes
See Collapse Usage in the Docs.
Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<div class="row">
<div class="col-xs-3 col-sm-2 col-md-2">
<img class="media-object" src="http://placehold.it/350x150" width="75px" height="65px" alt="alt">
</div>
<div class="col-xs-9 col-sm-10 col-md-10">
NAME
</div>
</div>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
DESC
</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>
Related
I have an accordion with three "panels" First one is expanded on inital load.
The first panel have an input field. When the user has updated this field I would like to automatically expand the next panel and collapse the current panel.
The accordion it self works as expected ( I have jquery avaiable on the page).
I have searched and only found examples of expanding/collapsing by clicking on a link/button.
How do I do that?
This is my code:
$(document).ready(function() {
// Add minus icon for collapse element which is open by default
$(".collapse.in").each(function() {
$(this).siblings(".panel-heading").find(".glyphicon").addClass("rotate");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function() {
$(this).parent().find(".glyphicon").addClass("rotate");
}).on('hide.bs.collapse', function() {
$(this).parent().find(".glyphicon").removeClass("rotate");
});
});
<div class="bs-example">
<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="#collapseOne"><span
class="glyphicon glyphicon-menu-right"></span> Text</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div class="col-sm-3">
<label for="text">Text</label>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-8">
<input type="text" class="form-control" id="textfield" ng-model="textfield" ng-blur="c.updatedField()">
<br />
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span
class="glyphicon glyphicon-menu-right"></span> More text</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span
class="glyphicon glyphicon-menu-right"></span> Even more text</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
</div>
</div>
you could find a working solution in this snippet. The idea is to manually manipulate the bootstrap collapse elements.
$(document).ready(function() {
// Add minus icon for collapse element which is open by default
$(".collapse.in").each(function() {
$(this).siblings(".panel-heading").find(".glyphicon").addClass("rotate");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function() {
$(this).parent().find(".glyphicon").addClass("rotate");
}).on('hide.bs.collapse', function() {
$(this).parent().find(".glyphicon").removeClass("rotate");
});
});
$(document).on("change", "#textfield", function(){
$("#collapseOne").collapse('hide');
$("#collapseTwo").collapse('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bs-example">
<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="#collapseOne"><span
class="glyphicon glyphicon-menu-right"></span> Text</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div class="col-sm-3">
<label for="text">Text</label>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-8">
<input type="text" class="form-control" id="textfield" ng-model="textfield" ng-blur="c.updatedField()">
<br />
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span
class="glyphicon glyphicon-menu-right"></span> More text</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span
class="glyphicon glyphicon-menu-right"></span> Even more text</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
</div>
</div>
I'm new to bootstraps and coding altogether, so I am currently trying to open my main bootstrap panel with an onclick -event which contains nested sub panels.
This is my index.html containing the panels and the button;
<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>
<form onsubmit="return false" id="searchForm">
<input type="button" value="Search" id="search" class="openPanel" />
</form>
<br/><br/>
<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="#collapse6">Sub panel 3</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>
I've tried this code for opening the main -panel but I can't get this to work;
<script type="text/javascript">
$(document).ready(function () {
$("#search").on("click", function () {
$(this).closest('.panel-heading').find('.collapse').collapse('show');
});
});
</script>
So as for my question, is there any easy and effective way to only open the main -panel with the button click and after it's opened the button won't affect the panel anymore?
Thanks.
Here you go with a solution https://jsfiddle.net/hbfvta27/
$(document).ready(function () {
$("#search").on("click", function () {
if( !$('.collapse').first().hasClass('in'))
$('a[data-toggle="collapse"]').first().click();
});
});
<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>
<form onsubmit="return false" id="searchForm">
<input type="button" value="Search" id="search" class="openPanel" />
</form>
<br/><br/>
<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="#collapse6">Sub panel 3</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>
Hope this will help you.
just add a class named 'in' on click of a bootstrap panel I hope it will help you
$(document).ready(function () {
$(".panel-groupMain").on("click", function () {
$(this).find('#collapse1').toggleClass('in');
});
});
I have a accordion which is working absolutely fine but what I need is to open only one tab at a time, means when one tab is opened then another tab should be closed.
Currently you can see that we can open all the tabs by clicking on tab links.
Code here
<div id="accordion" class="checkout">
<div class="panel checkout-step">
<div class="head" role="tab" id="headingOne">
<img src="{{ asset('bundles/leaderboxfrontfront/img/1.png') }}" alt="">
<div id="bubble">
<h1><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" > MON PROJET</a></h1>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="form-zone">
<div class="content">
Some content
</div>
</div>
</div>
</div>
<div class="panel checkout-step">
<div class="head" role="tab" id="headingTwo">
<img src="{{ asset('bundles/leaderboxfrontfront/img/3.png') }}" alt="">
<div id="bubble">
<h1><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" > je choisis mon centre</a></h1>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="form-zone">
<div class="content">
Some content
</div>
</div>
</div>
</div>
I have created two bootstrap accordions, one below the other. I did not like the way that the panels were awkwardly shifting locations when I had them all as one accordion, so I created two separate accordions. In doing so, each accordion works the way I would like: only one panel-body can be open at a time per accordion, but I would like to only allow one panel-body to be open..
To better explain what I mean...
Currently, you can have one panel-body opened in both the top and bottom row. I want you just to be able to have one opened at a time.
Is this possible to do?
Here is an example of what I have made
https://codepen.io/aahmed2/pen/yOQvVz
Here is my code.
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading bites-stings" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<h4>Mosquitoes</h4>
<h4>Ticks</h4>
<h4>Bees and Wasps</h4>
<h4>Animal Bites</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h4>Pet Allergies</h4>
<h4>Toxic Plants</h4>
<h4>Pet and Wildlife Encounters</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading zoonotic" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<h4>Bacterial</h4>
<h4>Fungal</h4>
<h4>Parasitic</h4>
<h4>Prionotic</h4>
<h4>Rickettsial</h4>
<h4>Spirochetes</h4>
<h4>Viral</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading allergies" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<h4>Animal Allergies</h4>
<h4>Environmental Allergies</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading environment-health" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
</div><!--/collapse-->
</div>
</div>
To have multiple accordions but only one open at the same time you just need to combine the data-parent. So I have made a codepen for you to see it working.
I just changed all data-parent to data-parent="#accordion,#accordion2"
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading bites-stings" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<h4>Mosquitoes</h4>
<h4>Ticks</h4>
<h4>Bees and Wasps</h4>
<h4>Animal Bites</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h4>Pet Allergies</h4>
<h4>Toxic Plants</h4>
<h4>Pet and Wildlife Encounters</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading zoonotic" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<h4>Bacterial</h4>
<h4>Fungal</h4>
<h4>Parasitic</h4>
<h4>Prionotic</h4>
<h4>Rickettsial</h4>
<h4>Spirochetes</h4>
<h4>Viral</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading allergies" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<h4>Animal Allergies</h4>
<h4>Environmental Allergies</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading environment-health" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
</div><!--/collapse-->
</div>
I am having a problem trying to get two Bootstrap Accordions to work within separate tabs on the same page.
Basically, when I click through the first accordion all works as it should with the content collapsing and expanding as expected.
When it comes to the second accordion however, clicking on the links has no affect but it does apply my css styling to the element.
My question is how do I get it so that both accordions collapse and expand as per the expected behaviour of accordion#1?
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<!-- ACCORDION NO.1 -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading edu1 active-state" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">HEADING 1</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading edu1" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">HEADING 2</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading edu1" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">HEADING 3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
***** SOME OTHER CONTENT *****
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<!-- ACCORDION NO.2 -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading prev-emp activestate" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-2" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">HEADING 1</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading prev-emp" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">HEADING 2</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading prev-emp" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">HEADING 3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
***** SOME OTHER CONTENT *****
</div>
</div>
</div>
Here is the jQuery i am using;
$(function() {
$('.panel-heading').click(function() {
if ($(this).hasClass('activestate')) {
$(this).removeClass('activestate');
} else {
$('.panel-heading').removeClass('activestate');
$(this).addClass('activestate');
}
});
});
I have replicated my issue here with accordion1 in tab 1 and accordion 2 in tab 3: http://jsfiddle.net/4yk7yzo9/1/
I am a no0b with jQuery so please play nicely and thanks in advance for any pointers in the right direction
You were simply repeating the same ID's for the accordions. And also, some of the data-parents were mixed up, Here is your Updated Fiddle
See some of the changes to the 2nd accordion below:
<div class="panel-group" id="accordion-2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading prev-emp activestate" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">HEADING 1</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading prev-emp" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">HEADING 2</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<!-- Start of Previous Employment Tab #3 -->
<div class="panel panel-default">
<div class="panel-heading prev-emp" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">HEADING 3</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
</div>
This duplicated id is the problem
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
***** SOME TEXT *****
</div>
</div>
You have used the same ID over and over again for each tabs. That is both your 3 accordions set has the similar id attributes.
Here is the working fiddle, updated your fiddle. :)
https://jsfiddle.net/Lq26j75z/