Сегодня рассмотрим создание аккордиона на Bootstrap. Как всегда обращаемся к нашему getbootstrap.com. Давайте теперь попробуем из этого сделать аккордион
Как всегда начнем с задания контейнера для всего блока с классом panel-group и любым идентификатором, в моем случае это accordion
<div class="panel-group" id="accordion"> ... </div>
В нашем аккордионе 4 блока, каждый из которого нужно обернуть в свой контейнер с классом panel panel-default
<div class="panel panel-default"> ... </div>
А теперь давайте посмотрим на код, котоырй отвечает за заголовки и привязки блоков к этим заголовкам.
<div class="panel-heading"> <h4 class="panel-title"> <a href="#vacc" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"><span class="glyphicon glyphicon-pushpin"></span> Vaccinations</a> </h4> </div> <div id="vacc" class="panel-collapse collapse in"> <div class="panel-body"> <p>Dogs and cats are susceptible to a variety of illnesses that can be completely prevented by following the appropriate vaccination schedule.</p> <p><a href="#" class="btn btn-info">Read more >></a></p> </div> </div>
Как видно из кода, у нас есть заголовок и тело аккордиона, а чтобы их связать между собой мы используем data-***, а все остальное у нас отвечает только за внешний вид.