Bootstrap Collapse not Collapsing

javascript css twitter-bootstrap collapse

158,840

Solution 1

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>

Solution 2

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.

Solution 3

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>

Solution 4

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

Solution 5

You need jQuery see bootstrap's basic template

View more solutions

158,840

Author by

poshanniraula

Updated on July 09, 2022

Comments

poshanniraula almost 2 years

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?

Claudio almost 7 years

Any idea why this function would not work with ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js ?
GoldBishop over 2 years

remove -bs- makes version 5.1 not operate with the accordion effect.
Dhouibi iheb over 2 years

You saved me hours of searching! Thank you Could you specify where you get the response, or is there an updated version of bootstrap docs that contains that info.. I am using bootstrap 5 a lot these days
Jon over 2 years

This solution is what worked for me. Using Bootstrap 5.1.3 I needed import transitions from "bootstrap". I didn't have to use the imported transitions anywhere, but I believe it must have imported a needed dependency. Here's a working CodeSandbox
Admin over 2 years

The transitions SCSS partial contains the CSS styles for the collapse and expand animations. Without these transitions, the collapsing is not animated and therefore nothing happens in the browser.
Ian Smith about 2 years

Thank you, the top Google result of Collapsing defaults to the Bootstrap V4 docs :(, I'm guessing that is throwing a lot of people off.