ブートストラップの折りたたみがJQueryで動作しない

Question

これは私を狂ってしまいます。

私はこれがあります。

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

そして、私は（さまざまな方法で）これで崩壊を発射しようとしています：

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

私が得るすべては次のとおりです。

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

を

アイデア

`` `

Answer 1

確認のjQueryをブートストラップ上記に含まされていることを確認し、それが正常に動作します

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

この

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

ソース試してみてください

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

これをチェックしてください。 bootstrap.min.js/bootstrap.jsは、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>