Bootstrap аккордеон: panel и collapse разбор и использование

Опубликовано: 01.09.2018

Продолжаем разбирать компоненты фреймворка Bootstrap . В этой статье рассмотрим так называемый аккордеон. Аккордеон на сайте зачастую используют для создания многоуровневого меню с несколькими уровнями вложенности, для этого идеально подходит решение jQuery, а аккордеон от Bootstrap имеет немного другую функциональность. С его помощью можно создавать сворачиваемые панели, содержащие контент различной величины, но при этом все будет выглядеть компактно, как на примере.

Для оформления панелей можно использовать знакомые нам шесть классов фреймворка, либо стилизовать их самостоятельно, если есть такая необходимость. Каждая из панелей аккордеона состоит из шапки и контента. В контент можно поместить текст любой длинны, изображения, видео и т.д. В шапке находится заголовок со ссылкой, о нем подробнее поговорим чуть ниже. Такой аккордеон отлично подойдет для лендингов с большим количеством текста и сделает его гораздо компактнее.

Весь HTML-код аккордиона выглядит вот так:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-primary"> <div class="panel-heading" role="tab" id="heading1"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Панель с классом «panel-primary» </a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1"> <div class="panel-body">Для оформления панелей можно использовать знакомые нам шесть классов фреймворка, либо стилизовать их самостоятельно, если есть такая необходимость. Каждая из панелей аккордеона состоит из шапки и контента. В контент можно поместить текс любой длинны, изображения, видео и т.д. В шапке находится заголовок со ссылкой, о нем подробнее поговорим чуть ниже. Такой аккордеон отлично подойдет для лендингов с большим количеством текста и сделает его гораздо компактнее.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="heading2"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Панель с классом «panel-default» </a> </h4> </div> <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> <div class="panel-body"> </div> </div> </div> <div class="panel panel-success"> <div class="panel-heading" role="tab" id="heading3"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Панель с классом «panel-success» </a> </h4> </div> <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3"> <div class="panel-body"> </div> </div> </div> <div class="panel panel-warning"> <div class="panel-heading" role="tab" id="heading4"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse4"> Панель с классом «panel-warning» </a> </h4> </div> <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4"> <div class="panel-body"> </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading" role="tab" id="heading5"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="false" aria-controls="collapse5"> Панель с классом «panel-info» </a> </h4> </div> <div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5"> <div class="panel-body"> </div> </div> </div> <div class="panel panel-danger"> <div class="panel-heading" role="tab" id="heading6"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse6" aria-expanded="false" aria-controls="collapse6"> Панель с классом «panel-danger» </a> </h4> </div> <div id="collapse6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading6"> <div class="panel-body"> </div> </div> </div> </div>

Заголовок панели является ссылкой, как реализовано в данном случае, также можно использовать кнопку, только нужно будет заменить href на data-target. Обратите внимание, что data-toggle="collapse" необходимо указывать в обоих случаях.

<!-- Ссылка с href --> <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseID" aria-expanded="false" aria-controls="collapseID">Ссылка с href</a> <!-- Кнопка с data-target --> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseID" aria-expanded="false" aria-controls="collapseID">Кнопка с data-target</button>

Если нужно при загрузке страницы сделать какую-то панель развернутой, то необходимо атрибуту aria-expanded присвоить значение true и к обертке контента добавить класс in. Обратите внимание, что развернутой может быть только одна панель.

<!-- Выставляем aria-expanded в true --> <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseID" aria-expanded="true" aria-controls="collapseID">Ссылка с href</a> <!-- Панель изночально развернута --> <div id="collapseID" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingID"> <div class="panel-body">....</div> </div>

Используются три класса для управления панелями:

.collapse – сворачивает панель; .collapse.in – разворачивает панель; .collapsing – добавляется при переходе и удаляется при окончании перехода.

Как видите, все просто: стоит добавить один класс, изменить значение атрибута и нужная панель будет развернута принудительно.

Используя метод collapse(), можно управлять открыванием и закрыванием вручную.

$('#myCollapse').collapse();

Передавать параметры можно двумя способами: через data- атрибуты в HTML-коде, как показано в самом начале, либо передавать их методу collapse(options), который активирует элемент аккордеона и принимает необязательный объект параметров:

$('#myCollapse').collapse({ toggle: false }); .collapse('toggle') – переключает (открывает или закрывает) элемент; .collapse('show') – открывает элемент; .collapse('hide') – закрывает элемент.

События

Класс collapse предоставляет несколько событий для подключения к функциям сворачивания:

$('#myCollapse').on('hidden.bs.collapse', function () { // сделать что-то... });

Управлять элементами аккордеона Bootstrap с помощью JavaScript также достаточно просто. Как работать, используя JavaScript или атрибуты данных (data-), решать вам, оба варианта просты в использовании. Надеюсь, что данное решение пригодится вам на практике.

rss