Bootstrap Collapse Widget не работает

Question

Мне нужно использовать Collapse in bootstrap, чтобы скрыть некоторую информацию и отобразить один раз, когда кнопка нажата, но я не знаю, что это неправильно, почему она не работает.

<div id="myModal6" class="modal fade mdl" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h2 class="modal-title title_modal">Sample Data 
       <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle pull-right btn_details" role="button" aria-controls="toggle-pane-88" id="toggle-89" aria-expanded="false">Toggle</span> 
      </h2> 
     </div> 
     <div class="modal-body"> 
      <p class="toggle-collapsed" aria-hidden="true" id="toggle-pane-88" aria-expanded="false" aria-labelledby="toggle-89">This is my content! 
      </p> 
      <div class="row"> 
       <div class="col-md-6"> 
        <p class="headline_text">Sample again</p> 
        <p style="text-align:center"><img src="img/samp.jpg" 
       </div> 
       <div class="col-md-6"> 
        <p class="headline_text">&nbsp;&nbsp;&nbsp;&nbsp;</p> 
        <p style="text-align:center"><img src="img/samp21.jpg"/> </p> 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 
    </div> 
</div> 

Я также включать здесь файлы необходимы в загрузчике:

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 

<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script> 
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> 
<script src="js/script.js" type="text/javascript"></script> 
<script src="dist/js/app.min.js" type="text/javascript"></script> 

Answer 1

Если вы просто пытаетесь поставить панель коллапс внутри модального вам нужно добавить целевой DIV для #toggle-pane-88. См. Пример.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 
<div id="myModal" class="modal fade mdl" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h2 class="modal-title title_modal">Sample Data 
 
        <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle pull-right btn_details" role="button" aria-controls="toggle-pane-88" id="toggle-89" aria-expanded="false">Toggle</span> 
 
        </h2> 
 

 
     </div> 
 
     <div class="modal-body"> 
 
     <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#toggle-pane-88">Simple collapsible</button> 
 
     <div id="toggle-pane-88" class="collapse"> 
 
      <p class="headline_text">Sample again</p> 
 
      <p style="text-align:center"> 
 
      <img src="img/samp.jpg" </div> 
 
      <p class="headline_text">&nbsp;&nbsp;&nbsp;&nbsp;</p> 
 
      <p style="text-align:center"> 
 
       <img src="img/samp21.jpg" /> 
 
      </p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>