I'm trying to get collapse to work using the example provided on twitter bootstrap's website. When I try out this code, clicking the link to collapse the content does nothing. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to get collapse to work using the example provided on twitter bootstrap's website. When I try out this code, clicking the link to collapse the content does nothing. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>
</body>
</html>
Share
Improve this question
edited Nov 19, 2022 at 18:55
Daniel Widdis
9,13113 gold badges48 silver badges68 bronze badges
asked Aug 12, 2013 at 3:57
user2481095user2481095
2,1068 gold badges23 silver badges35 bronze badges
1
- 1 Check the console; any errors? – Ry- ♦ Commented Aug 12, 2013 at 3:58
1 Answer
Reset to default 15Bootstrap's JavaScript library relies on jQuery. You need to include that before bootstrap.js
, eg
<script src="//ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="../js/bootstrap.js"></script>
See the note here - http://getbootstrap./2.3.2/getting-started.html#file-structure
Please note that all JavaScript plugins require jQuery to be included.
Or the modern equivalent ~ http://getbootstrap./getting-started/#jquery-required
jQuery required
Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our
bower.json
to see which versions of jQuery are supported.