Develop Reference

Accordion panel on click scrolls to the bottom of page then back up

Basically, I have an accordion on mobile using the bootstap tab collapse.js. Everything works as should, but when the user clicks on to the next panel below, it seems to scroll them down the page and then back up to the container they clicked.
$(document).on('click', '#pdp-tabs-accordion .js-tabcollapse-panel-heading', function () {
self = $(this);
setTimeout(function () {
console.log('scrolling to');
console.log(self.closest('.panel'));
ScrollToElement(self.closest('.panel'), 95);
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a aria-controls="advice" role="tab" data-toggle="collapse" class="js-tabcollapse-panel-heading collapsed" data-parent="#pdp-tabs-accordion" aria-expanded="false">Centre</a></h4> </div>
<div id="advicecentre-collapse" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;"> <div class="panel-body js-tabcollapse-panel-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 col-xl-6 col-xl-offset-3">
<div class="row">
<div class="product-misc product-misc--advice-centre" id="advice-centre">
<h3>Centre</h3>
<p>We have selected the following pages from our Advice Centre as possibly the most relevant for you.</p>
<div class="row">
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
What is DWR?
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
DWR Washing & Care
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Waterproof Ratings Explained
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Waterproof Seams Explained
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
2, 2.5 or 3 Layer Fabric?
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Keeping Warm In The Snow
</div>
</div>
</div>
<div class="product-misc__item" itemprop="productID">
<p>We have hundreds more pages, including more Buying Guides and Size Chart.</p>
</div>
<h3 class="margin-top">Size Charts</h3>
<div class="row" id="size-charts">
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
686 - Men's Snowboard Jackets Size Chart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Any suggestions or ideas you might have to why this is happening would be great.
thanks in adavance!

Bootstrap Accordion Icons not changing Dynamically

I am trying to Add bootstrap Accordion to my project but its not working.... what is the problem with my code i have added below with JavaScript.
I am also including following files in my project.
Thanks in Advance.
Regards.
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-up"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find('.glyphicon-collapse-down').removeClass('.glyphicon-collapse-down')
}).on('hidden.bs.collapse', function () {
$(this).parent().find('..glyphicon-collapse-up').removeClass('.glyphicon-collapse-up').addClass('.glyphicon-collapse-down');
});
});
</script>

You can look for the previous element and find the span with a class of .glyphicon.
Then simply add or remove the up and down classes.
Here is an example.
$('.collapse')
.on('show.bs.collapse', function () {
$(this).prev().find('.glyphicon')
.removeClass('glyphicon-collapse-down')
.addClass('glyphicon-collapse-up')
})
.on('hide.bs.collapse', function () {
$(this).prev().find('.glyphicon')
.removeClass('glyphicon-collapse-up')
.addClass('glyphicon-collapse-down')
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-up"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

In order to change the accordion icons I would suggest to use:
.toggleClass() in order to change icons from down to up and vice versa,
show.bs.collapse event
hide.bs.collapse event
$(document).ready(function () {
$('.collapse').on('show.bs.collapse hide.bs.collapse', function () {
$(this).closest('.panel').find('.panel-heading .glyphicon').toggleClass('glyphicon-collapse-down glyphicon-collapse-up')
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Refer to this link. http://jsfiddle.net/panchroma/3gYa3/
Bootstrap accordion using only CSS
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}

How can I dynamically remove columns in a Bootstrap grid?

I have a web page with Bootstrap 3. In this web page, I have a row. In that row, I always want to show three items. However, I really have 10 items.
When a user clicks the "remove" button, I want to remove an item, and make the next one slide in. However, I have been unable to figure out how to do this within the context of a Bootstrap row. Currently, my items are laid out like this:
<div class="row">
<div class="col-xs-4">
<div id="panel1" class="panel panel-default">
<div class="panel-heading" style="background-color:#43258A; color:#fff;">Item #1</div>
<div class="panel-body">
Item #1 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel2" class="panel panel-default">
<div class="panel-heading" style="background-color:#249B73;">Item #2</div>
<div class="panel-body">
Item #2 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel3" class="panel panel-default">
<div class="panel-heading" style="background-color:#FFF635;">Item #3</div>
<div class="panel-body">
Item #3 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel4" class="panel panel-default">
<div class="panel-heading" style="background-color:#FE6E18;">Item #4</div>
<div class="panel-body">
Item #4 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel5" class="panel panel-default">
<div class="panel-heading" style="background-color:#F91721;">Item #5</div>
<div class="panel-body">
Item #5 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel6" class="panel panel-default">
<div class="panel-heading" style="background-color:#1BA8CE;">Item #6</div>
<div class="panel-body">
Item #6 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel7" class="panel panel-default">
<div class="panel-heading" style="background-color:#9B3B24; color:#fff;">Item #7</div>
<div class="panel-body">
Item #7 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel8" class="panel panel-default">
<div class="panel-heading" style="background-color:#0A4E38; color:#fff;">Item #8</div>
<div class="panel-body">
Item #8 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel9" class="panel panel-default">
<div class="panel-heading" style="background-color:#7BE7C3;">Item #9</div>
<div class="panel-body">
Item #9 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel10" class="panel panel-default">
<div class="panel-heading" style="background-color:#E7B22A;">Item #10</div>
<div class="panel-body">
Item #10 Details
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeFirst()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeSecond()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeThird()">
Remove This
</button>
</div>
</div>
To manage the state of the items, I have the following JavaScript:
var visiblePanels = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function removeFirst() {
var panelId = '#panel' + visiblePanels[0];
$(panelId).fadeOut({
duration:500
});
visiblePanels.splice(0, 1);
}
function removeSecond() {
var panelId = '#panel' + visiblePanels[1];
$(panelId).fadeOut({
duration:500
});
visiblePanels.splice(1, 1);
}
function removeThird() {
var panelId = '#panel' + visiblePanels[2];
$(panelId).fadeOut({
duration:500
});
visiblePanels.splice(2, 1);
}
The problem is, I can't get the items to slide to the left when an item is removed. In addition, the items wrap instead of just being hidden beyond the first row. I've created a Fiddle here to show the code running.

Add the parent() method to hide the whole Bootstrap column
$(panelId).parent().fadeOut({
duration:500
});
Demo 1
To get the extra pseudo-rows of items to be hidden, you'll probably have to set a max-height and hide overflow on the parent row:
.row.some-class {
max-height: 110px;
overflow: hidden;
}
Demo 2
The drawback here is that you'd have to have items that never change height, and you'll have to use media queries to account for cases where heights change due to text wrapping, etc. You might be better off using one of the many jQuery sliders instead.

You need to fadeOut a parent() as mantioned in the other answer. Also you need to add one more wrapping <div class="frm"> for horizontal scrolling of aligned boxes. This div dedicated to being as wide as set of boxes aligned horisontally. I repalced fadeOut with hide - it looks much better.
there are additional css attributes for .row:
.row {
overflow:hidden;
height: auto;
}
Here is snippet
var visiblePanels = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
$(".frm").width($(".row").width()*visiblePanels.length/2.5);
$(".frm > div").width($(".row").width()/3.4);
$(window).resize(function(){
$(".frm > div").width($(".row").width()/3.4);});
function removeFirst() {
var panelId = '#panel' + visiblePanels[0];
$(panelId).parent().hide({
duration:500
});
visiblePanels.splice(0, 1);
}
function removeSecond() {
var panelId = '#panel' + visiblePanels[1];
$(panelId).parent().hide({
duration:500
});
visiblePanels.splice(1,1);
}
function removeThird() {
var panelId = '#panel' + visiblePanels[2];
$(panelId).parent().hide({
duration:500
});
visiblePanels.splice(2,1);
}
.row {
overflow:hidden;
height: auto;
}
<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>
<div class="row">
<div class="frm">
<div class="col-xs-4">
<div id="panel1" class="panel panel-default">
<div class="panel-heading" style="background-color:#43258A; color:#fff;">Item #1</div>
<div class="panel-body">
Item #1 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel2" class="panel panel-default">
<div class="panel-heading" style="background-color:#249B73;">Item #2</div>
<div class="panel-body">
Item #2 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel3" class="panel panel-default">
<div class="panel-heading" style="background-color:#FFF635;">Item #3</div>
<div class="panel-body">
Item #3 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel4" class="panel panel-default">
<div class="panel-heading" style="background-color:#FE6E18;">Item #4</div>
<div class="panel-body">
Item #4 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel5" class="panel panel-default">
<div class="panel-heading" style="background-color:#F91721;">Item #5</div>
<div class="panel-body">
Item #5 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel6" class="panel panel-default">
<div class="panel-heading" style="background-color:#1BA8CE;">Item #6</div>
<div class="panel-body">
Item #6 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel7" class="panel panel-default">
<div class="panel-heading" style="background-color:#9B3B24; color:#fff;">Item #7</div>
<div class="panel-body">
Item #7 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel8" class="panel panel-default">
<div class="panel-heading" style="background-color:#0A4E38; color:#fff;">Item #8</div>
<div class="panel-body">
Item #8 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel9" class="panel panel-default">
<div class="panel-heading" style="background-color:#7BE7C3;">Item #9</div>
<div class="panel-body">
Item #9 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel10" class="panel panel-default">
<div class="panel-heading" style="background-color:#E7B22A;">Item #10</div>
<div class="panel-body">
Item #10 Details
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeFirst()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeSecond()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeThird()">
Remove This
</button>
</div>
</div>

Make the Panel Heading on Bootstrap Collapse clickable

I am trying to fix this minor issue on my website. I am using the Bootstrap accordion for a part of my website. Currently the tabs only open when you click on the text over the panel-heading. I want to be able to click the panel-heading and have it open the hidden content rather than the text being the button to open the hidden content. I am unsure how to do it though. Does anyone know how?
http://codepen.io/aahmed2/pen/yOQvVz
Thanks in advance!
Here is the part I am trying to fix (I couldn't get it to look like code on here so please visit the link I provided to Codepen)
<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>
Zoonotic Diseases
Bacterial
Fungal
Parasitic
Prionotic
Rickettsial
Spirochetes
Viral
Allergies
Animal Allergies
Environmental Allergies
Environmental Health
This is a Topic
Topic 2
Another Topic

You have to add
role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"
to the panel divs like this:
<div class="panel panel-default col-md-4" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<div class="panel-heading bites-stings" role="tab" id="headingSeven">
<a >
<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>
and so on for the other ones

I modified the panels to be like this (and removed the a (anchor) tag as it is not needed)
(note: fix was applied to first panel only in the running code below)
<div class="panel-heading bites-stings"
data-toggle="collapse" data-parent="#accordion,#accordion2"
href="#collapseOne" aria-expanded="false"
aria-controls="collapseOne" role="tab" id="headingSeven">
<h2>Bites and Stings</h2>
</div>
It should work now.
Also added this to your CSS
div[role="tab"]:hover {
cursor: pointer;
}
Running sample below (note: fix was applied to first panel only in the running code below)
div[role="tab"]:hover {
cursor: pointer;
}
#accordion2 {
margin-top: -20px;
}
.panel-heading:focus {
outline: 0;
border: none;
}
.panel-group {
clear: both;
}
.panel-group .panel {
border-width: 0;
padding: 0 !important;
border-radius: 0%;
}
.panel-group .panel-heading {
height: 100px;
text-align: center;
color: #fff;
padding-top: 2%;
border: 1px solid #fff;
border-radius: 0%;
background-color: rgba(0, 0, 0, 0.5);
}
.panel-group .panel-heading h2 {
color: #fff;
text-shadow: 2px 2px 3px #000000;
padding-top: 90px;
}
.panel-group .panel-heading a:active,
.panel-group .panel-heading a:visited,
.panel-group .panel-heading a:focus {
text-decoration: none !important;
}
.panel-group .panel-collapse {
background-color: #DDDDDD;
}
.panel-group .panel-body {
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
.panel-group > .panel {
margin-top: 5px;
}
.panel-group .panel-heading {
background-color: rgba(0, 0, 0, 1);
border-radius: 0%;
color: #fff;
height: 350px;
text-align: center;
}
.bites-stings {
background: url(http://animals.sandiegozoo.org/sites/default/files/juicebox_slides/bee_honeycomb_03.jpg);
background-size: cover;
}
.pet-health {
background: url(http://petnetpull1.petnet.netdna-cdn.com/wp-content/uploads/2015/11/Pets-Dogs-Cats.jpg?c1906d);
background-size: cover;
}
.livestock-health {
background: url(https://aos.iacpublishinglabs.com/question/aq/700px-394px/what-is-a-group-of-cows-called_d87d5c1c-8102-4634-baea-c03e5bd8784f.jpg?domain=cx.aos.ask.com);
background-size: cover;
}
.zoonotic {
background: url(http://www.urdogs.com/wp-content/uploads/2015/08/talking-to-dog.jpg);
background-size: cover;
}
.allergies {
background: url(http://www.consostatic.com/wp-content/uploads/2009/03/allergie-au-pollen-symptomes-solutions-naturelles-plante-03.jpg);
background-size: cover;
}
.environment-health {
background: url(https://media-cdn.tripadvisor.com/media/photo-s/02/b5/36/97/lake-mcconaughy.jpg);
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<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" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h2>Bites and Stings</h2>
</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>
</div>

Bootstrap accordion not collapsing

I'm developing a bootstrap accordion for my website but it's not working in dreamweaver cc and when I publish it in my browser.
Looks like it works on JSFiddle. Here is a link: JSFiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<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" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#one1" aria-expanded="false" aria-controls="one1" >SHOP LIST</a>
</h4>
</div>
<div id="one1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" >
<div class="panel-body">
<table width="903" border="0">
<tbody>
<tr style="font-size: 10px">
<td width="293" align="center" valign="top" style="font-size: 10px">
<p1>HOKKAIDO<br>GRAN SAC'S 苫小牧 0144-53-5355</p1><br><br>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I've been looking for a solution for hours but still can't figure out what's wrong with my accordion.

Here is example please check where is your mistake and still you have doubt please give comment.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<div class="container">
<div class="row">
<article class="content col-sm-12 col-md-12">
<p>Some Text </p>
<br>
<div class="clearfix"></div>
<div class="filter-box accordions-filter">
<div class="panel-group filter-elements" id="accordion">
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<i class="fa fa-circle"></i> Text 1
</a>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<p>No worries. Just let us know your preferred time slot. We will call you 1 hour before to know your availability. It is possible to reschedule the call; your time is valuable to us.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<i class="fa fa-circle"></i> Text 2
</a>
</div>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>We are one call away to help you out. Your emergency is our priority.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
<i class="fa fa-circle"></i>Text 3
</a>
</div>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<p>Yes. We are working through the week. Your weekends are our peak days as we value your time :)</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
<i class="fa fa-circle"></i>Text 4
</a>
</div>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p>Any small work of around 30 mins is included in this minimum charge. It also includes an inspection and visit to your place so that Zimmber Champ will understand your requirement and will offer best available solution to suit your budget requirement. These visiting charges will be waived off, if you avail of our services. But minimum charges will be applicable in case of no show.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">
<i class="fa fa-circle"></i>Text 6
</a>
</div>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p>You can mention your discount code when placing the order on the website or mobile app. As per the applicability & terms of the discount coupon, discount amount will be deducted from the total amount. Please note multiple discount coupons cannot be applied on the same order or with any other discounts offered to customers.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">
<i class="fa fa-circle"></i> Text 7
</a>
</div>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p>You can mention your discount code when placing the order on the website or mobile app. As per the applicability & terms of the discount coupon, discount amount will be deducted from the total amount. Please note multiple discount coupons cannot be applied on the same order or with any other discounts offered to customers.</p>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>