Сегодня рассмотрим создание аккордиона на 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-***, а все остальное у нас отвечает только за внешний вид.