Я пытаюсь создать очень простой webapp, который перечисляет несколько сглаживаемых записей в стиле гармоничного стиля для отображения и скрытия небольших неупорядоченных списков. Я слежу за несколькими учебниками, поскольку я не очень разбираюсь в бутстрапе, но я не могу понять, что я делаю неправильно. Функция коллапса работает очень хорошо, но расширение одного не сворачивает другие. Вот код, я работаю с:У вас возникли проблемы с загрузкой Accordion

<!DOCTYPE html>

аккордеона

<div id="accordian" role="tablist" aria-multiselectable="true"> 
     <div class="card"> 
      <div class="card-header" role="tab" id="headingOne"> 
       <a data-toggle="collapse" href="#one" data-parent="#accordian" aria-expanded="true" aria-controls="one"> 
        <h4 class="mb-0"> 
         One 
        </h4> 
       </a> 
      </div> 
      <div id="one" class="collapse" role="tabpanel" aria-labelledby="headingOne"> 
       <div class="card-block"> 
        <ul> 
         <li>A</li> 
         <li>B</li> 
        </ul> 
       </div> 
      </div> 
     </div> 

     <div class="card"> 
      <div class="card-header" role="tab" id="headingTwo"> 
       <a data-toggle="collapse" href="#two" data-parent="#accordian" aria-expanded="false" aria-controls="two"> 
        <h4 class="mb-0"> 
         Two 
        </h4> 
       </a> 
      </div> 
      <div id="two" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
       <div class="card-block"> 
        <ul> 
         <li>C</li> 
         <li>D</li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 


    <div data-role="footer"> 
     <h1>Footer</h1> 
    </div> 
</body>

источник

2017-02-12 user1784207

Для того, чтобы элементы складные выступать в качестве аккордеон (сворачивание всех остальных сбрасываемых элементов при открытии) вам нужно добавить класс «panel-group» к охватывающему элементу div, который содержит сбрасываемые элементы. Затем просто добавьте класс «панель» ко всем панелям группы группы div.

 <div class="panel-group" id="accordian" role="tablist" aria-multiselectable="true"> 
 
     <div class="panel card"> 
 
      <div class="card-header " role="tab" id="headingOne"> 
 
       <a data-toggle="collapse" href="#one" data-parent="#accordian" aria-expanded="true" aria-controls="one"> 
 
        <h4 class="mb-0"> 
 
         One 
 
        </h4> 
 
       </a> 
 
      </div> 
 
      <div id="one" class="collapse" role="tabpanel" aria-labelledby="headingOne"> 
 
       <div class="card-block"> 
 
        <ul> 
 
         <li>A</li> 
 
         <li>B</li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="panel card"> 
 
      <div class="card-header" role="tab" id="headingTwo"> 
 
       <a data-toggle="collapse" href="#two" data-parent="#accordian" aria-expanded="false" aria-controls="two"> 
 
        <h4 class="mb-0"> 
 
         Two 
 
        </h4> 
 
       </a> 
 
      </div> 
 
      <div id="two" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
       <div class="card-block"> 
 
        <ul> 
 
         <li>C</li> 
 
         <li>D</li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

источник

2017-02-13 01:15:44 Inkdot

У вас возникли проблемы с загрузкой Accordion

аккордеона

ответ

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