Bootstrap Collapse not Collapsing

Question

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?

score 49 · Accepted Answer · edited Apr 30 '21 at 16:21

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>

Any idea why this function would not work with https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js ? — Claudio, Jun 08 '17 at 18:01

score 20 · Answer 2 · answered Apr 09 '14 at 07:51

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>

score 10 · Answer 3 · answered Apr 09 '14 at 07:55

10

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

answered Apr 09 '14 at 07:55

Terabyte

421
2
12

score 7 · Answer 4 · answered Apr 09 '14 at 07:53

7

You need jQuery see bootstrap's basic template

answered Apr 09 '14 at 07:53

a5hk

6,552
2
22
34

score 5 · Answer 5 · answered Mar 03 '21 at 20:56

5

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 03 '21 at 20:56

ocirocir

2,225
1
17
30

score 1 · Answer 6 · answered Mar 25 '21 at 06:19

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-

score 0 · Answer 7 · answered Jun 05 '20 at 13:57

0

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 05 '20 at 13:57

NaabNuts

334
3
9

score 0 · Answer 8 · answered Apr 28 '21 at 05:23

0

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

answered Apr 28 '21 at 05:23

Rahul Srinivas

1

score 0 · Answer 9 · answered May 12 '21 at 11:17

0

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.

answered May 12 '21 at 11:17

netniV

1,998
1
13
22

score -5 · Answer 10 · answered Jul 26 '16 at 03:57

-5

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 '16 at 03:57

Awon Abbas

1
2

Bootstrap Collapse not Collapsing

10 Answers10