Bootstrap Collapse Not Working with JQuery

Question

This is driving me insane.

I have this:

<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 am trying to fire the collapse with this (in various ways):

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

All I get is:

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

Any ideas?

```

```

Nacreous

jQuery should always be included fiirst. – Bondsman

change the sequence of the Jqueries you have included. first JQuery.min.js or jQuery.js then other. – Bondsman

can you please show us how you have added the javascript libraries on to your html page? – Confocal

This might also happen if you're using jQuery.slim or a custom jQuery UI build from jqueryui.com/download which doesn't include effects. – Lollipop

Answer 1

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

Marlenamarlene

Answer 2

I was having the same problem.... So in JQuery I did something like this:

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

As mentioned in official doc...

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

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

Rigdon

I did the same, but I kept the animation by doing the following: $(this).slideUp('fast', function() { $(this).removeClass('show'); $(this).attr('style', null); }); – Kwangju

Answer 3

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

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

but worked with:

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

Prochronism

wow, this was exactly my problem and the chances of having this specific problem are hilariously thin. nonetheless, appears these two libraries don't work well together. turns out if you put the full lightbox-plus-jquery script before query and bootstrap, things seem to work nicely... – Supersaturated

Answer 4

It took me an hour to figure it out.
Here is the simple solution. I will explain with three different method
1. Replace

import * as $ from 'jquery';

with

declare var $ : any;

If it did't solve your problem than
2. make sure you import jquery and bootstrap in index.html as below, jQuery shoud be first

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>      
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">   
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

If it did't work
3. than install jquery,jquery ui,jquery action and bootstrap

npm install jquery --save
npm install @types/jquery --save
npm install bootstrap --save

Now import in your ts or js file

import * as $ from 'jquery'; 

Update angular.json file

"styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss",
              "./node_modules/font-awesome/css/font-awesome.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css"

            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

That all it should work by now,Thanks

Tor

Answer 5

jquery 3.5.0 is giving error in using collapse feature of bootstrap 4 instead use jquery 3.4.1 version. it worked properly in my case.

Truce

Answer 6

<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 this. Your bootstrap.min.js/bootstrap.js is declare after your 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>

Enact

Answer 7

I was using my jQuery code as a separate file in my Vue.js project. Even I imported jQuery in this file (which was installed using npm), I was continuously getting this 'collapse is not a function' error. I tried many solutions and was able to fix after this.

1. Install bootstrap using npm.
2. Import bootstrap after importing jQuery.

import "bootstrap"

I hope this may be helpful for someone.

Illogical

Answer 8

In general, it may happen that depending on the Bootstrap version, you may need the prefix "data-bs-" or the prefix "data-" for different implementations. For example:

You may need data-bs-toggle="collapse" or data-toggle="collapse"

You may need data-bs-target="#collapseContent" or data-target="#collapseContent"

In modals, you may need data-bs-toggle="modal" or data-toggle="modal"

depending on Bootstrap version

Gunfight

Answer 9

Try this

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

Source :Bootstrap Collapse - Jquery "Collapse all" function

Entrench