Бутстрап Аккордеон в двух колонках

Я предварю это, сказав, что я нахожусь на хвосте 13-часового дня. & у меня кровотечение.Бутстрап Аккордеон в двух колонках

Я пытался выяснить, почему мой аккордеон в этом проекте теперь плохо работает, когда он работал хорошо раньше. Аккордеон разделяется примерно наполовину, причем первые два элемента ведут себя так, как должны, но последние три просто остаются открытыми, когда другой расширяется. Мой HTML выглядит следующим образом:

<hr class="style-five"> 
 
<center><h1 class="hidden-sm hidden-xs" style=" font-family: 'Stylist Pro Regular Regular';">some text.</h1></center> 
 
<center><h3 class="visible-sm visible-xs" style="margin-top: -55px; font-family: 'Stylist Pro Regular Regular';">some text.</h3></center> 
 
<div class="row"> 
 
\t <div class="col-md-6"> 
 
\t \t <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-heading" role="tab" id="headingOne"> 
 
\t \t \t <h4 class="panel-title"> 
 
\t \t \t \t <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
\t \t \t \t <center>some text</center></a> 
 
\t \t \t </h4> 
 
\t \t \t </div> 
 
\t \t \t <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
\t \t \t <div class="panel-body"> 
 
\t \t \t \t <p>some text</p> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-heading" role="tab" id="headingTwo"> 
 
\t \t \t <h4 class="panel-title"> 
 
\t \t \t \t <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
\t \t \t \t <center>some text</center></a> 
 
\t \t \t </h4> 
 
\t \t \t </div> 
 
\t \t \t <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
\t \t \t <div class="panel-body"> 
 
\t \t \t \t <p>some text</p> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="col-md-6"> 
 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-heading" role="tab" id="headingThree"> 
 
\t \t \t <h4 class="panel-title"> 
 
\t \t \t \t <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
 
\t \t \t \t <center>some text</center></a> 
 
\t \t \t </h4> 
 
\t \t \t </div> 
 
\t \t \t <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
 
\t \t \t <div class="panel-body"> 
 
\t \t \t \t <p>some text</p> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-heading" role="tab" id="headingFour"> 
 
\t \t \t <h4 class="panel-title"> 
 
\t \t \t \t <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> 
 
\t \t \t \t <center>some text</center></a> 
 
\t \t \t </h4> 
 
\t \t \t </div> 
 
\t \t \t <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> 
 
\t \t \t <div class="panel-body"> 
 
\t \t \t \t <p>some text</p> 
 
\t \t \t \t <a class="bodlink" href="#">some text</a> some text 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-heading" role="tab" id="headingFour"> 
 
\t \t \t <h4 class="panel-title"> 
 
\t \t \t \t <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> 
 
\t \t \t \t <center>some text</center></a> 
 
\t \t \t </h4> 
 
\t \t \t </div> 
 
\t \t \t <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> 
 
\t \t \t <div class="panel-body"> 
 
\t \t \t \t <p>some text</p> 
 
\t \t \t \t <p>some text</p> 
 
\t \t \t \t <p>some text</p> 
 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</hr>

Я звоню в CSS, JQuery JS & следующим образом:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Что я пропустил?

источник

2015-08-19 Jeff W

Это проблема: вы не можете использовать групповую шину в столбцах с одинаковым идентификатором, работающим в унисон. Вам нужно JS, чтобы справиться с этим.

Duplicate

$('#accordion').on('show.bs.collapse', function() { 
 
    $('#accordion .in').collapse('hide'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
     <div class="col-md-6"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading" role="tab" id="headingOne"> 
 
      <h4 class="panel-title"> 
 
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
           <center>some text</center></a> 
 
          </h4> 
 

 
      </div> 
 
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
      <div class="panel-body"> 
 
       <p>some text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading" role="tab" id="headingTwo"> 
 
      <h4 class="panel-title"> 
 
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
           <center>some text</center></a> 
 
          </h4> 
 

 
      </div> 
 
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
      <div class="panel-body"> 
 
       <p>some text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading" role="tab" id="headingThree"> 
 
      <h4 class="panel-title"> 
 
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
 
           <center>some text</center></a> 
 
          </h4> 
 

 
      </div> 
 
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
 
      <div class="panel-body"> 
 
       <p>some text</p> 
 
      </div> 
 
      </div> 
 
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
      <div class="panel-body"> 
 
       <p>some text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading" role="tab" id="headingFour"> 
 
      <h4 class="panel-title"> 
 
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> 
 
           <center>some text</center></a> 
 
          </h4> 
 

 
      </div> 
 
      <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> 
 
      <div class="panel-body"> 
 
       <p>some text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading" role="tab" id="headingFive"> 
 
      <h4 class="panel-title"> 
 
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> 
 
           <center>some text</center></a> 
 
          </h4> 
 

 
      </div> 
 
      <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> 
 
      <div class="panel-body"> 
 
       <p>some text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2015-08-19 01:52:26 vanburen

Это не он - ТБЙ, что ID не было даже должна быть там ... это было результатом некоторых поиска неисправностей я делаю. Теперь я отредактировал код, чтобы отразить это. Кажется, что проблема связана с вставкой столбцов. Начальный (только, теперь) #accordion div заканчивается на 2 над вторым столбцом, и никакая гаванность с моей стороны не фиксирует его. –

Я закончил тем, что разделил его на 2 аккордеона. Это тоже не понравилось JS. –

Бутстрап Аккордеон в двух колонках

ответ

Смежные вопросы