бутстрап аккордеон не рушится другие открытые вкладки автоматически

Question

Я пытаюсь реализовать бутстрап-аккордеонный коллапс в проекте, и у меня возникают проблемы с частью автоматического сгибания. Предположим, что есть 3 divs: A, B и C., если A открыто, и я нажимаю B, A должен автоматически свернуть, но это не так. Я хочу открыть только один раздел одновременно.

Я уже проверял несколько раз мой код, а также некоторые уроки и другие вопросы здесь, но все еще не могу заставить его работать. Любая помощь приветствуется.

Вот скрипка, хотя анимация не работает, поскольку она связана с бутстрапом. Но, по крайней мере, вы, ребята, можете увидеть код: https://jsfiddle.net/3ap18Lda/1/

<script src="https://code.jquery.com/jquery.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 


    <!-- accordion --> 

<div class="container"> 
    <div id="accordion" role="tablist" aria-multiselectable="true"> 


    <div class="row caracteristicas-table"> 
     <div class="col-sm-12"> 
     <div role="tab" id="headingOne"> 

      <h3 class="dark-grey">HERE GOES THE TITLE</h3> 

      <span class="orange-line"></span> 

      <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum pharetra ligula, non varius diam feugiat dignissim. Cras tellus quam, facilisis eget imperdiet eu, fermentum non justo. </h4> 


      <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
       <i class="down-arrow"><img src="images/down-arrow.svg"></i><h4 class="text-quero-mais">I want to know some more</h4> 
      </a> 

     </div> <!--/tab --> 

     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
      <h4>Mauris vel ante eu tortor vulputate congue eu eget nibh. Suspendisse malesuada vehicula felis, vel sodales diam interdum eu. Etiam eu ante egestas, elementum nulla nec, gravida felis.</h4> 
     </div> <!--/collaspeOne --> 


     </div><!--/col --> 
    </div> <!--/row --> 





    <div class="row caracteristicas-table"> 
     <div class="col-sm-12"> 
     <div role="tab" id="headingTwo"> 

      <h3 class="dark-grey">HERE GOES THE TITLE</h3> 

      <span class="orange-line"></span> 

      <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum pharetra ligula, non varius diam feugiat dignissim. Cras tellus quam, facilisis eget imperdiet eu, fermentum non justo.</h4> 


      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
       <i class="down-arrow"><img src="images/down-arrow.svg"></i><h4 class="text-quero-mais">I want to know some more</h4> 
      </a> 

     </div> <!--/tab --> 

     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
      <h4>Mauris vel ante eu tortor vulputate congue eu eget nibh. Suspendisse malesuada vehicula felis, vel sodales diam interdum eu. Etiam eu ante egestas, elementum nulla nec, gravida felis.</h4> 
     </div> <!--/collaspeTwo --> 


     </div><!--/col --> 
    </div> <!--/row --> 




    <div class="row caracteristicas-table"> 
     <div class="col-sm-12"> 
     <div role="tab" id="headingThree"> 

      <h3 class="dark-grey">HERE GOES THE TITLE</h3> 

      <span class="orange-line"></span> 

      <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum pharetra ligula, non varius diam feugiat dignissim. Cras tellus quam, facilisis eget imperdiet eu, fermentum non justo. </h4> 


      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
       <i class="down-arrow"><img src="images/down-arrow.svg"></i><h4 class="text-quero-mais">I want to know some more</h4> 
      </a> 

     </div> <!--/tab --> 

     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
      <h4>Mauris vel ante eu tortor vulputate congue eu eget nibh. Suspendisse malesuada vehicula felis, vel sodales diam interdum eu. Etiam eu ante egestas, elementum nulla nec, gravida felis.</h4> 
     </div> <!--/collaspeThree --> 


     </div><!--/col --> 
    </div> <!--/row --> 


    </div> <!--/accordion --> 
</div> <!--/container --> 

Спасибо!

Answer 1

Вы не загружаются самозагрузки и ни JQuery,

Вы должны загрузить их как для того, чтобы это работало. Я просто добавил ссылки на вашу скрипку, и она работает.

<script src='jquery.js'/> 
<script src='bootstrap.js'/> 

После того как я понимаю реальную проблему:

ломал голову над этим. Я полагаю, что это не так:

• У вас не хватает класса «панели», необходимо добавить его в каждой секции
• Существует ошибка с закладками некоторого рода, как описано здесь - https://github.com/openam/bootstrap-responsive-tabs/issues/45

Я установил ее в this fiddle, добавив класс панели для каждого DIV и добавить этот скрипт:

$('.panel-collapse').on('show.bs.collapse', function (e) { 
     $(e.target).closest('.panel').siblings().find('.panel-collapse').collapse('hide'); 
    });