Bootstrap Collapse not Collapsing

Question

I am trying to create a collapsable component using Bootstrap  My code is this   x000D   x000D   lt link rel  stylesheet  href  http   netdna bootstrapcdn com bootstrap 3 1 1 css bootstrap min css  gt  x000D   lt script src  http   netdna bootstrapcdn com bootstrap 3 1 1 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt div class  panel-group  id  accordion  gt  x000D     lt div class  panel panel-default  gt  x000D       lt div class  panel-heading  gt  x000D         lt h4 class  panel-title  gt  x000D           lt a data-toggle  collapse  data-parent   accordion  href   collapseOne  gt  x000D        Collapsible Group Item  1 x000D       lt  a gt  x000D         lt  h4 gt  x000D       lt  div gt  x000D       lt div id  collapseOne  class  panel-collapse collapse in  gt  x000D         lt div class  panel-body  gt  x000D          Anim pariatur cliche reprehenderit x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  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

User · Accepted Answer

jQuery is required  -   DEMO   lt html gt   lt head gt       lt link rel  stylesheet  href  http   netdna bootstrapcdn com bootstrap 3 1 1 css bootstrap min css  gt       lt  -- THIS LINE -- gt       lt script src    code jquery com jquery-1 11 0 min js  gt  lt  script gt       lt script src  http   netdna bootstrapcdn com bootstrap 3 1 1 js bootstrap min js  gt  lt  script gt   lt  head gt   lt body gt    lt div class  panel-group  id  accordion  gt       lt div class  panel panel-default  gt           lt div class  panel-heading  gt               lt h4 class  panel-title  gt                   lt a data-toggle  collapse  data-parent   accordion  href   collapseOne  gt                      Collapsible Group Item  1                  lt  a gt               lt  h4 gt           lt  div gt           lt div id  collapseOne  class  panel-collapse collapse in  gt               lt div class  panel-body  gt                  Anim pariatur cliche reprehenderit              lt  div gt           lt  div gt       lt  div gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

You need jQuery see bootstrap s basic template

User · Answer

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

User · Answer

Maybe your mobile view port is not set  Add following meta tag inside  lt head gt  lt  head gt  to allow menu to work on mobiles    lt meta name viewport content  width device-width  initial-scale 1  gt

User · Answer

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   lt head gt       lt link rel  stylesheet  href  http   netdna bootstrapcdn com bootstrap 3 1 1 css bootstrap min css  gt       lt script src  http   code jquery com jquery-1 11 0 min js  gt  lt  script gt       lt script src  http   netdna bootstrapcdn com bootstrap 3 1 1 js bootstrap min js  gt  lt  script gt   lt  head gt

User · Answer

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

[javascript] Bootstrap Collapse not Collapsing

Examples related to javascript

Examples related to css

Examples related to twitter-bootstrap

Examples related to collapse