बूटस्ट्रैप संकुचन 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>

कृपया इसे चेक करें। आपके jquery लाइब्रेरी घोषणा के बाद आपका bootstrap.min.js/bootstrap.js घोषित किया गया है।

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