We Keep Coding

Bootstrap Accordion Expand/Collapse All not functioning properly

Here's the process to break this:
click Music Notation
click Expand/Collapse All
click Music Notation
click Expand/Collapse All
click Expand/Collapse All again
Notice how Music Notation will NOT open back up, even though, you should be able to see in the function, that the logic says that ALL panels are closed and should open. WHY? What am I doing wrong?
HTML:
<button class="btn btn-default btn-sm btn-exp" id="expandAllFormats">Expand/Collapse All</button>
<div class="panel-group checkbox-group" id="accordionFormat" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatText" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatText">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text
</a>
</h4>
</div>
<div id="formatText" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ALPHA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatArt" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatArt">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Art
</a>
</h4>
</div>
<div id="formatArt" class="panel-collapse collapse" aria-expanded="false" role="tabpanel">
<div class="panel-body">BETA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatAudio" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatAudio">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Audio
</a>
</h4>
</div>
<div id="formatAudio" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">GAMMA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatNotation" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatNotation">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Music Notation
</a>
</h4>
</div>
<div id="formatNotation" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">DELTA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatVideo" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatVideo">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Video
</a>
</h4>
</div>
<div id="formatVideo" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">EPSILON</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatInteractive" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatInteractive">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Digital Interactive
</a>
</h4>
</div>
<div id="formatInteractive" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ZETA</div>
</div>
</div>
</div>
JS:
var toggleFormat = false;
$('#expandAllFormats').on('click', function(e) {
e.preventDefault();
console.log(toggleFormat);
$("#accordionFormat .panel-collapse").each(function(index, value){
if (toggleFormat){
if($(this).hasClass('in')){
$(this).collapse('toggle');
console.log("This panel is open. it will be closed");
} else {
console.log("This panel is closed. it will stay closed");
}
} else {
if(!$(this).hasClass('in')){
$(this).collapse('toggle');
console.log("This panel is closed. it will be open");
} else {
console.log("This panel is open. it will stay open");
}
}
});
toggleFormat = toggleFormat ? false : true;
});

The problem is that the state of all panels is different than the state of any single panel because of the way accordion works with data-parent. Your expand/collapse all button handler needs to completely override that normal accordion behavior.
The expand/collapse all click handler must keep track of the last state (expand all or collapse all), because the Bootstrap Collapse component is seperately handing the state of each single panel (only one open at a time). Otherwise, there would be no way to know whether to open or close the individually toggled panels.
$('#expandAllFormats').on('click', function () {
if ($(this).data("lastState") === null || $(this).data("lastState") === 0) {
// close all
$('.collapse.in').collapse('hide');
// next state will be open all
$(this).data("lastState",1);
$(this).text("Expand All");
}
else {
// initial state...
// override accordion behavior and open all
$('.panel-collapse').removeData('bs.collapse')
.collapse({parent:false, toggle:false})
.collapse('show')
.removeData('bs.collapse')
// restore single panel behavior
.collapse({parent:'#accordionFormat', toggle:false});
// next state will be close all
$(this).data("lastState",0);
$(this).text("Collapse All");
}
});
http://codeply.com/go/76Hl6s49rb
OFC, another way is to simply remove the data-parent= attributes and completely disable the accordion behavior.

If you can afford to remove the data-parent attribute data-parent="#accordionFormat" from all elements where it exists it will solve your issue.
Why? I'm not sure but it seems that attribute triggers some logic that messes up with the collapse functionality.
var toggleFormat = false;
$('#expandAllFormats').on('click', function (e) {
e.preventDefault();
console.log(toggleFormat);
$("#accordionFormat .panel-collapse").each(function (index, value) {
if (toggleFormat) {
if ($(this).hasClass('in')) {
$(this).collapse('toggle');
console.log("This panel is open. it will be closed");
} else {
console.log("This panel is closed. it will stay closed");
}
} else {
if (!$(this).hasClass('in')) {
$(this).collapse('toggle');
console.log("This panel is closed. it will be open");
} else {
console.log("This panel is open. it will stay open");
}
}
});
toggleFormat = toggleFormat ? false : true;
});
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-default btn-sm btn-exp" id="expandAllFormats">Expand/Collapse All</button>
<div class="panel-group checkbox-group" id="accordionFormat" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatText" role="button" data-toggle="collapse" href="#formatText">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text
</a>
</h4>
</div>
<div id="formatText" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ALPHA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatArt" class="collapsed" role="button" data-toggle="collapse" href="#formatArt">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Art
</a>
</h4>
</div>
<div id="formatArt" class="panel-collapse collapse" aria-expanded="false" role="tabpanel">
<div class="panel-body">BETA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatAudio" class="collapsed" role="button" data-toggle="collapse" href="#formatAudio">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Audio
</a>
</h4>
</div>
<div id="formatAudio" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">GAMMA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatNotation" class="collapsed" role="button" data-toggle="collapse"
href="#formatNotation">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Music Notation
</a>
</h4>
</div>
<div id="formatNotation" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">DELTA</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatVideo" class="collapsed" role="button" data-toggle="collapse" href="#formatVideo">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Video
</a>
</h4>
</div>
<div id="formatVideo" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">EPSILON</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatInteractive" class="collapsed" role="button" data-toggle="collapse"
href="#formatInteractive">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Digital Interactive
</a>
</h4>
</div>
<div id="formatInteractive" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ZETA</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap accordion with two more/less link

I'm trying to create a collapsible panel with the possibility to click on two point to expand/collapse it, on the panel title and on the bottom right text.
What I did so far is this:
HTML:
<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">Title Panel 1</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse in">
<div class="panel-body">
Contents panel 1
</div>
</div>
<div class="expandPanel">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Expand</a>
</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">Title Panel 2</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 2
</div>
</div>
<div class="expandPanel">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Expand</a>
</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">Title Panel 3</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 3
</div>
</div>
<div class="expandPanel">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Expand</a>
</div>
</div>
</div>
Javascript:
jQuery(function ($) {
var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
$active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
$('#accordion .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
$('#accordion').on('show.bs.collapse', function (e)
{
$('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
$(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$('#accordion').on('hide.bs.collapse', function (e)
{
$(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
});
http://jsfiddle.net/f908rx8v/1/
I'm stuck there.
I would like to move the plus/minus image from the panel title to the bottom right and the text "Expand" should follow the rule; show "Expand" when the panel isn't expanded and "Collapse" when it's expanded.
Thanks!

I placed the glyphicons initially inside .expandPanel a, so they will appear on the bottom right, and edited your JS a little to make them udpate as well as the text on the left side:
jQuery(function ($) {
$('.panel-collapse').on('hide.bs.collapse', function() {
var expandPanel = $(this).next('.expandPanel');
expandPanel
.find('.toggle-text').text('Expand');
expandPanel
.find('.glyphicon')
.removeClass('glyphicon-minus')
.addClass('glyphicon-plus');
});
$('.panel-collapse').on('show.bs.collapse', function() {
var expandPanel = $(this).next('.expandPanel');
expandPanel
.find('.toggle-text').text('Collapse');
expandPanel
.find('.glyphicon')
.removeClass('glyphicon-plus')
.addClass('glyphicon-minus');
});
});
<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">Title Panel 1</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse in">
<div class="panel-body">
Contents panel 1
</div>
</div>
<div class="expandPanel">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">
<span class="toggle-text">Collapse</span>
<span class="glyphicon glyphicon-minus pull-right"></span>
</a>
</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">Title Panel 2</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 2
</div>
</div>
<div class="expandPanel">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">
<span class="toggle-text">Expand</span>
<span class="glyphicon glyphicon-plus pull-right"></span>
</a>
</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">Title Panel 3</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">
Contents panel 3
</div>
</div>
<div class="expandPanel">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">
<span class="toggle-text">Expand</span>
<span class="glyphicon glyphicon-plus pull-right"></span>
</a>
</div>
</div>
</div>
Hope this helps!

data-parent="#accordion" not working

I have a scenario where i need to toggle when I click on specific topic and related question list should appear and I also want to closed when one of the collapsible item is shown for that I used accordion.
HTML:
<ul id="accordion">
<li ng-repeat="topics in oJdDetails.topics" class="topic-li" data-toggle="collapse" data-target="{{'#'+topics + $index}}" data-parent="#accordion" ng-click="fngetQList(topics,$index)">
<p class="topics-p"> {{topics}}</p>
<ul id="{{topics + $index}}" class="collapse topic-li">
<li ng-repeat="value in aQuestionList">{{value.quesList.quesListName}}</li>
</ul>
</li>
</ul>
JavaScript:
$scope.fngetQList = function(topics, index) {
debugger;
$scope.displayQList = true;
$scope.sTopics = topics;
$scope.index = index;
getCandidateInterviewListService.fnGetQList(topics).then(function(response) {
$scope.aQuestionList = response;
console.log($scope.aQuestionList);
});
};
Here topics are coming as response and I am making dynamic id for collapse
but here accordion is not working.
When I click on specific topic the order topic which are opened before are not closed and I don't understand the issue.
Any help would be appreciated.

I can't give example here in angular but you can use event "show.bs.collapse" which fire on clicking any accordion, on click you can close those accordion which has class .in and then your clicked accordion will opens. Please see Demo below:
$('#accordion .collapse').on('show.bs.collapse', function (e) {
alert("Open clicked accordian but hide others(already opened)");
$('#accordion .in').collapse('hide');
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading " role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#1" aria-expanded="true" aria-controls="collapseOne">
1
</a>
</h4>
</div>
<div id="1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Panel body data
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#2" aria-expanded="false" aria-controls="collapseTwo">
2
</a>
</h4>
</div>
<div id="2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Panel body data
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#3" aria-expanded="false" aria-controls="collapseThree">
3
</a>
</h4>
</div>
<div id="3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Panel body data
</div>
</div>
</div>
</div>
</div>

Bootstrap Collapse Accordion one panel open, all others close

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>

Getting two Bootstrap Accordions to work within tabs

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/