I am trying to create a collapsable component using Bootstrap. My code is this
<link rel="stylesheet" href="">
<script src=""></script>
<div> <div> <div> <h4> <a href="#collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div> <div> Anim pariatur cliche reprehenderit </div> </div> </div>
</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?
13 Answers
I was getting crazy for one hour... I reply to this question after 7 years, because if you are using the new Boostrap 5, the attributes are data-bs-toggle, data-bs-parent, and data-bs-target, pay attention to the -bs- in the middle.
jQuery is required (if you're using Bootstrap 3 or 4) ;-)
<html>
<head> <link rel="stylesheet" href=""> <!-- THIS LINE --> <script src="//"></script> <script src=""></script>
</head>
<body>
<div> <div> <div> <h4> <a href="#collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div> <div> Anim pariatur cliche reprehenderit </div> </div> </div>
</div>
</body>
</html>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=""> <script src=""></script> <script src=""></script>
</head>Add jQuery and make sure only one link for jQuery cause more than one doesn't work...
You need jQuery see bootstrap's basic template
If using Bootstrap 4.5 collapse component, use these two links inside the body of HTML tag
<script src="" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> If you are using latest Bootstrap version.
Then you just need to replace this data-bs-toggle="collapse" to this data-toggle="collapse"and don't need to do more. It means you just need to remove -bs-
For me (with Bootstrap v5.1), the solution was to import the transitions SCSS partial ()
@import "transitions";
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.
Make sure to change the bootstrap cdn versions to check. try bootstap4 . Avoid bootstrap 5 as it is still in beta
Another good reason for this is either incorrectly formatted html, so things aren't closed up properly, or your id tags have things like full stops in them, that jquery will bawk at.
I had similar issue using bootstrap 5 and found I'm following bootstrap 4 instructions. and followed BS 5 instructions and resolved. here is the right working example please check Bootstrap5 collapse Example
<p> <a href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <button type="button" aria-expanded="false" aria-controls="collapseExample"> Button with data-bs-target </button>
</p>
<div> <div> Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. </div>
</div>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">
