Создание аккордиона в Bootstrap 3

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

Посмотреть демо скачать урок

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Scroll Up
Adblock detector