Geek Answers Handbook

Error loading Bootstrap with jQuery

It drives me crazy.

I have it:

<div class="container"> <div class="panel panel-primary"> <div class="panel-heading" id="panel-head"> <a data-toggle="collapse" data-target="#collapseDiv" class="white-link" id="toggle" >Records Added <span class="indicator glyphicon glyphicon-chevron-down pull-left pad-right" id ="glyphicon"></span> </a> </div> <div id="collapseDiv" class="panel-collapse collapse"> <div class="panel-body">

And I'm trying to fire a crash with this (in different ways):

$('#collapseDiv').collapse("toggle")

All I get is:

Uncaught TypeError: $ (...). collapse is not a function (...)

Any ideas?

`` ``

`` ``

+7
source share
5 answers

Make sure jquery is included above Bootstrap, it works fine

 $('#collapseDiv').collapse("toggle"); 
 .white-link{color:#fff;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="container"> <div class="panel panel-primary"> <div class="panel-heading" id="panel-head"> <a data-toggle="collapse" data-target="#collapseDiv" class="white-link" id="toggle">Records Added <span class="indicator glyphicon glyphicon-chevron-down pull-left pad-right" id ="glyphicon"></span> </a> </div> <div id="collapseDiv" class="panel-collapse collapse"> <div class="panel-body">
+16
source

I had the same problem .... So in jQuery I did something like this:

 $('#collapseDiv').removeClass('show');

As mentioned in the white paper ...

  1. .collapse hides content
  2. collapse is applied in transitions
  3. collapse.show shows content

that's why I deleted the 'show' class and it worked for me ... the only drawback is that it hides immediately (without any animation)

+1
source 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="container"> <div class="panel panel-primary"> <div class="panel-heading" id="panel-head"> <a data-toggle="collapse" href="#collapseDiv" class="white-link" id="toggle" >Records Added <span class="indicator glyphicon glyphicon-chevron-down pull-left pad-right" id ="glyphicon"></span> </a> </div> <div id="collapseDiv" class="panel-collapse collapse"> <div class="panel-body">rywrujtwyjdtyjdsyjktyj</div> </div> </div> </div>

Please check it. Your bootstrap.min.js / bootstrap.js is declared after the jquery library declaration.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
0
source

I had a similar problem with Lightbox (from Lokesh Dhakar) if I used:

 <script src="js/lightbox-plus-jquery.min.js"></script>

but worked with:

 <script src="js/lightbox.min.js"></script>
0
source

try it

  $('.panel-collapse').collapse({ toggle: false });

Source: Bootstrap Break - Collapse All JQuery Function

-1
source

More articles:


All Articles