I am trying to create a collapsable component using Bootstrap. My code is this
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">_x000D_
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>_x000D_
_x000D_
<div class="panel-group" id="accordion">_x000D_
<div class="panel panel-default">_x000D_
<div class="panel-heading">_x000D_
<h4 class="panel-title">_x000D_
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">_x000D_
Collapsible Group Item #1_x000D_
</a>_x000D_
</h4>_x000D_
</div>_x000D_
<div id="collapseOne" class="panel-collapse collapse in">_x000D_
<div class="panel-body">_x000D_
Anim pariatur cliche reprehenderit_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>The "Collapsible Group Item #1" when clicked should collapse the items in class "panel-body" but it doesn't there is no effect of click. I copied this code directly from Bootstrap documentation still it does not work. Can anyone figure out what is the problem?
This question is related to
javascript
css
twitter-bootstrap
collapse
bootstrap.js is using jquery library so you need to add jquery library before bootstrap js.
so please add it jquery library like
Note : Please maintain order of js file. html page use top to bottom approach for compilation
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
You need jQuery see bootstrap's basic template
Add jQuery and make sure only one link for jQuery cause more than one doesn't work...
Maybe your mobile view port is not set.
Add following meta tag inside <head></head> to allow menu to work on mobiles.
<meta name=viewport content="width=device-width, initial-scale=1">
I had this problem and the problem was bootstrap.js wasn't load in Yii2 framework.First check is jquery loaded in inspect and then check bootstrap.js is loaded?If you used any tooltip Popper.js is needed before bootsrap.js.
Source: Stackoverflow.com