Cоздание меню аккордеона на Bootstrap3

Оцените материал
(2 голосов)

Здравствуйте! Сегодня как я и обещал в прошлой статье я расскажу как в Bootstrap можно сделать блоки типа аккордеон. Это такие блоки которые могут показывать одну секцию открытой при этом скрывая все остальные за что и получили свое название аккордеон как одноименный музыкальный инструмент.

В Bootstrap есть плагин, который отвечает за плавное сворачивание и разворачивание блоков. Эта функция крайне удобна и может использоваться где угодно:

  • в навигации
  • для спойлеров
  • для блоков со скрытым текстом
  • свернутых пунктов меню
  • ответов на часто задаваемые вопросы

Из своего опыта могу сказать, что если ваш проект работает с использованием бутстрапа то collapse вы будете использовать постоянно. Плагин крайне прост в работе, не требует особой настройки и позволяет сворачивать любые блочные элементы. Сейчас я расскажу, как его использовать.

 

 

Пример

Для примера я создал кнопку и скрытый текстовый блок. По клику на кнопке блок будет либо показан, либо свернут.

 

Настройка

Вам нужны два объекта, где первый будет управлять видимостью второго. Первым может быть ссылка или кнопка.

Чтобы “указать” управляющему элементу, какой блок нужно сворачивать, есть два метода:

  1. атрибут href для ссылки,
  2. кнопка или любой другой объект с атрибутом data-target.

В обоих случаях этот элемент должен иметь атрибут the data-toggle="collapse". Второму блоку, который должен быть скрыт, нужно назначить класс .collapse.

Настройка через data-* атрибуты

Добавьте атрибуты data-toggle="collapse" и data-target управляющему элементу. Атрибут data-target должен содержать CSS-селектор элемента, видимость которого нужно менять. Также управляемому элементу нужно назначить класс .collapse.

По умолчанию такой элемент будет скрытым при загрузке страницы. Если вы хотите, чтобы он был видимым, добавьте ему дополнительно класс .in.

Настройка через javaScript

Если data-* атрибуты вам не подходят, можно обойтись без них, подключив коллапс при помощи js:

$('.collapse').collapse()

Автоскрытие остальных блоков (accordion)

Чтобы автоматически сворачивать все остальные элементы при показе нового, передайте параметр data-parent="#selector", где #selector может быть идентификатором, классом или любым другим css-селектором родительского элемента. Это удобно для показа ответов на часто задаваемые вопросы. Так, после выбора одного из ответов, все остальные автоматически будут свернуты. Код такого блока вы найдете в примерах ниже.

Методы collapse в Bootstrap.js

МетодОписание
.collapse(options) Инициализирует скрываемый элемент с параметрами options. В следующей таблице представлены варианты параметров.
.collapse("toggle") Сворачивает или разворачивает элемент. Зависит от текущего состояния.
.collapse("show") Разворачивает элемент.
.collapse("hide") Сворачивает элемент.

Параметры bootstrap collapse

Параметры, как и инициализацию объекта, можно передавать при помощи data-* атрибутов или через JavaScript. В первом случае имя атрибута идет после data-, например, data-parent=".container".

ПараметрТипПо умолчаниюОписание
parent selector false Если вы передаете селектор, то все скрываемые элементы внутри его будут скрыты при показе родительского блока.
toggle boolean true Менять ли видимость элемента при вызове

 

Пример: простое скрытие элементов

Это самый простой пример работы скрипта:

<button class="btn btn-info" data-toggle="collapse" data-target="#hide-me">Collapse Bootstrap.js</button>
<div id="hide-me" class="collapse in">
Анонимус — посетители анонимных борд, которые почти все являются анонимами.
</div>

Обратите внимание: благодаря классу .in сворачиваемый элемент по умолчанию виден. Анонимус — посетители анонимных борд, которые почти все являются анонимами.

Пример: сворачивание остальных блоков внутри родительского (эффект гармошки или accordion)

<div class="panel-group" id="collapse-group">
 <div class="panel panel-default">
 <div class="panel-heading">
 <h4 class="panel-title">
 <a data-toggle="collapse" data-parent="#collapse-group" href="#el1">Первый элемент</a>
 </h4>
 </div>
 <div id="el1" class="panel-collapse collapse in">
 <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
 </div>
 </div>
 <div class="panel panel-default">
 <div class="panel-heading">
 <h4 class="panel-title">
 <a data-toggle="collapse" data-parent="#collapse-group" href="#el2">Второй элемент</a>
 </h4>
 </div>
 <div id="el2" class="panel-collapse collapse">
 <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
 </div>
 </div>
 <div class="panel panel-default">
 <div class="panel-heading">
 <h4 class="panel-title">
 <a data-toggle="collapse" data-parent="#collapse-group" href="#el3">Третий элемент</a>
 </h4>
 </div>
 <div id="el3" class="panel-collapse collapse">
 <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
 </div>
 </div>
</div>

Просмотреть  пример

В этом примере при показе нового блока все остальные, которые находятся в том же родительском блоке, будут свернуты.

 

 

Прочитано 3864 раз Последнее изменение Суббота, 03 декабря 2016 15:16
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+