[javascript] Bootstrap Collapse not Collapsing

I am trying to create a collapsable component using Bootstrap. My code is this

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

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

The answer is


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

You need jQuery see bootstrap's basic template


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.


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>

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to twitter-bootstrap

Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor How to install popper.js with Bootstrap 4? Change arrow colors in Bootstraps carousel Search input with an icon Bootstrap 4 bootstrap 4 responsive utilities visible / hidden xs sm lg not working bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js Bootstrap 4 - Inline List? Bootstrap 4, how to make a col have a height of 100%? Bootstrap 4: Multilevel Dropdown Inside Navigation

Examples related to collapse

Bootstrap 3 - disable navbar collapse Bootstrap Collapse not Collapsing Bootstrap 3 collapse accordion: collapse all works but then cannot expand all while maintaining data-parent Change bootstrap navbar collapse breakpoint without using LESS How to disable margin-collapsing? Collapsing Sidebar with Bootstrap Twitter Bootstrap Use collapse.js on table cells [Almost Done] Expand and collapse with angular js Bootstrap: Collapse other sections when one is expanded