Bootstrap Collapse Non funziona con JQuery

Question

Questo mi sta facendo impazzire.

ho questo:

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

E io sto cercando di sparare il crollo con questo (in vari modi):

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

Tutto quello che ottiene è:

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

Qualche idea?

`` `

` ``

Answer 1

Assicurarsi Jquery è incluso sopra Bootstrap, funziona benissimo

$('#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">

Answer 2

Prova questa

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

Fonte: Bootstrap Collapse - Jquery "Collapse all" function

Answer 3

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

Si prega di controllare questo. Il tuo bootstrap.min.js/bootstrap.js è dichiarato dopo la dichiarazione della libreria jquery.

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