I've been trying to make a collapse accordion to work, but when i click the links nothing happens, the other items are not expanding and the first is not collapsing. The body is split in 3 columns (1-10-1) and the accordion is placed in the middle. I'm using bootstrap 3.3.7 and jquery 3.2.1. Is this happening due to how my tags are laid, or is something to do with jquery?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=".3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src=".3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src=".2.1/jquery.min.js"></script>
</head>
<body>
<!-- Body -->
<div class="container">
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
Panel 1
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<p>Text for 1</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
Panel 2
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<p>Text for 2</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-1"></div>
</div>
</div> <!-- Body -->
</body>
</html>I've been trying to make a collapse accordion to work, but when i click the links nothing happens, the other items are not expanding and the first is not collapsing. The body is split in 3 columns (1-10-1) and the accordion is placed in the middle. I'm using bootstrap 3.3.7 and jquery 3.2.1. Is this happening due to how my tags are laid, or is something to do with jquery?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!-- Body -->
<div class="container">
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
Panel 1
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<p>Text for 1</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
Panel 2
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<p>Text for 2</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-1"></div>
</div>
</div> <!-- Body -->
</body>
</html>- It looks like its working just fine – Chiller Commented Jul 2, 2017 at 9:35
- your code works fine jsbin./bodubuwoho/edit?html,output – Nirmal Dey Commented Jul 2, 2017 at 9:36
- Add jQuery lib at first. – Ataur Rahman Munna Commented Jul 2, 2017 at 9:37
- Indeed in jsbin works fine. I'm trying on both safari and chrome and does not work. What else can i try? – Kourvanas Kourvana Commented Jul 2, 2017 at 9:38
- @AtaurRahmanMunna you are a lifesaver. Didn't know that! Thanks – Kourvanas Kourvana Commented Jul 2, 2017 at 9:39
1 Answer
Reset to default 3Add jQuery lib before bootstrap.js. Because bootstrap internally uses jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!-- Body -->
<div class="container">
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
Panel 1
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<p>Text for 1</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
Panel 2
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<p>Text for 2</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-1"></div>
</div>
</div> <!-- Body -->
</body>
</html>