44

New! Save questions or answers and organize your favorite content.
Learn more.

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"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>  <div class="panel-group" id="accordion">   <div class="panel panel-default">     <div class="panel-heading">       <h4 class="panel-title">         <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">       Collapsible Group Item #1     </a>       </h4>     </div>     <div id="collapseOne" class="panel-collapse collapse in">       <div class="panel-body">         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?

Richard Parnaby-King's user avatar

asked Apr 9, 2014 at 7:41

poshanniraula's user avatar

1

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.

answered Mar 3, 2021 at 20:56

ocirocir's user avatar

2

jQuery is required (if you're using Bootstrap 3 or 4) ;-)

                    <html> <head>     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">     <!-- THIS LINE -->     <script src="//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> <body>  <div class="panel-group" id="accordion">     <div class="panel panel-default">         <div class="panel-heading">             <h4 class="panel-title">                 <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">                     Collapsible Group Item #1                 </a>             </h4>         </div>         <div id="collapseOne" class="panel-collapse collapse in">             <div class="panel-body">                 Anim pariatur cliche reprehenderit             </div>         </div>     </div> </div>  </body> </html>

nik7's user avatar

nik7

801 3 gold badges 10 silver badges 18 bronze badges

answered Apr 9, 2014 at 7:46

MaiKaY's user avatar

1

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>

answered Apr 9, 2014 at 7:51

Jay Patel's user avatar

Add jQuery and make sure only one link for jQuery cause more than one doesn't work...

answered Apr 9, 2014 at 7:55

Terabyte's user avatar

You need jQuery see bootstrap's basic template

answered Apr 9, 2014 at 7:53

a5hk's user avatar

If using Bootstrap 4.5 collapse component, use these two links inside the body of HTML tag

                <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Kevin M. Mansour's user avatar

answered Jul 25, 2021 at 14:13

Seema giri's user avatar

If you are using latest Bootstrap version. Then you just need to replace this data-bs-toggle="collapse" data-bs-target="#navbarNav" to this data-toggle="collapse" data-target="#navbarNav" and don't need to do more. It means you just need to remove -bs-

answered Mar 25, 2021 at 6:19

vishal jhorar's user avatar

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.

answered Jun 5, 2020 at 13:57

PouriaDiesel's user avatar

Make sure to change the bootstrap cdn versions to check. try bootstap4 . Avoid bootstrap 5 as it is still in beta

answered Apr 28, 2021 at 5:23

Rahul Srinivas's user avatar

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 class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">     Link with href   </a>   <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">     Button with data-bs-target   </button> </p> <div class="collapse" id="collapseExample">   <div class="card card-body">     Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.   </div> </div>

answered Jun 8 at 8:41

Vahid Chamarlou's user avatar

1

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 balk at.

p.campbell's user avatar

p.campbell

96.5k 65 gold badges 253 silver badges 319 bronze badges

answered May 12, 2021 at 11:17

netniV's user avatar

You probably added two script files and you need to delete one of them

                  <script src="./assets/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="./assets/bootstrap/js/bootstrap.min.js"></script>

delete bundle.min.js or bundle.js

answered Sep 7 at 4:45

ali talkhabi's user avatar

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">

answered Jul 26, 2016 at 3:57

Awon Abbas's user avatar