Bootstrap 3 аккордеон с плюсом

Bootstrap 3 — Аккордеон

Сегодня мы познакомимся с возможностями Twitter Bootstrap для создания аккордеона.

Создание аккордеона с помощью Twitter Bootstrap

Аккордеон обычно применяется для создания на сайте меню или навигации, в которые необходимо поместить много контента и навигационные списки. Следующий пример покажет вам, как создать аккордеон, используя компонент collapse (сворачивание):

Разворачивание и сворачивание панелей аккордеона через атрибуты data

Twitter Bootstrap позволяет разворачивать и сворачивать любую панель аккордеона без написания кода на языке JavaScript. Данную возможность Twitter Bootstrap мы уже рассмотрели выше, теперь давайте узнаем какие прикладные интерфейсы API Data за это отвечают.
Но перед тем как перейти к рассмотрению атрибутов data , давайте познакомимся поближе с работой компонента аккордеон. Аккордеон состоит из панелей, каждая из которых, в свою очередь, состоит из заголовка и содержимого. В заголовке обычно располагается ссылка или кнопка, при нажатии на которую происходит сворачивание или разворачивание содержимого.

Атрибут data-toggle=»collapse» необходимо добавить к элементу управления (например, кнопка или ссылка, нажав на которую вы хотите свернуть другой элемент, содержащий контент). А также необходимо указать какой именно элемент вы хотите свернуть, для этого необходимо добавить к элементу управления атрибутом data-target (для кнопки) или href (для ссылки) со значением идентификатора того элемента который необходимо свернуть.И ещё Не забудьте добавить класс .collapse к сворачиваемому элементу. Если вы хотите, чтобы элемент с содержимым по умолчанию был открыт, то необходимо дополнительно добавить класс .in .

Разворачивание и сворачивание панелей аккордеона с помощью JavaScript

Вы также можете сворачивать и разворачивать панели аккордеона вручную с помощью кода JavaScript — для этого вызовите метод Bootstrap collapse() и укажите с помощью идентификатора (#id) или класса (.class) тот элемент, который необходимо развернуть и свернуть.

Параметры

Есть определенные параметры, которые могут быть переданы методу Bootstrap collapse() для настройки функциональности сворачиваемого элемента.

Имя	Тип	Описание
parent	selector	Значение по умолчанию: false. В качестве selector используется идентификатор или имя класса управляемого элемента. При открытии панели аккордеона, управляемый элемент, который имеет идентификатор или класс родительского контейнера, закрывает другие панели, находящиеся в этом же родительском контейнере.
toggle	boolean	Значение по умолчанию: true. В зависимости от значения параметра включает или не включает сворачивание и разворачивание элемента аккордеона при вызове метода.

Вы также можете установить эти параметры с помощью атрибутов data для аккордеона. Для этого добавьте имя параметра к атрибуту data- , например: data-parent=»myAccordion» , data-toggle=»false» и т.д., как на примере в самом начале урока.

Методы

Метод	Описание	Пример
.collapse(параметры)	Метод активирует ваш контент как сворачиваемый элемент и применяет к нему параметры, указанные в скобках.	$(‘#id’).collapse( < toggle: false >)
.collapse(‘toggle’)	Метод toogle переключает (показывает или скрывает) сворачиваемый элемент.	$(‘#id’).collapse(‘toggle’)
.collapse(‘show’)	Метод show показывает сворачиваемый элемент.	$(‘#id’).collapse(‘show’)
.collapse(‘hide’)	Метод hide скрывает сворачиваемый элемент.	$(‘#id’).collapse(‘hide’)

На следующим примере продемонстрированы использование различных методов для сворачиваемых элементов:

События

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

Событие	Описание
show.bs.collapse	Это событие срабатывает сразу после вызова метода show().
shown.bs.collapse	Это событие срабатывает, когда сворачиваемый элемент становится виден для пользователя, т.е. когда будет завершён полностью процесс CSS для сворачиваемого элемента.
hide.bs.collapse	Это событие срабатывает сразу после вызова метода hide.
hidden.bs.collapse	Это событие сработает в тот момент, когда сворачиваемый элемент будет полностью скрыт от пользователя, т.е. событие будет ждать до тех пор, пока процесс CSS для сворачиваемого элемента будет полностью завершён.

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

Источник

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

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

Здравствуйте! Сегодня как я и обещал в прошлой статье я расскажу как в 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:

Автоскрытие остальных блоков (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	Менять ли видимость элемента при вызове

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

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

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

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Источник

Collapse

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

How it works

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it’s current value to 0 . Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.

Example

Click the buttons below to show and hide another element via class changes:

• .collapse hides content
• .collapsing is applied during transitions
• .collapse.show shows content

You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle=»collapse» is required.

Link with href Button with data-target

Multiple targets

Toggle first element Toggle second element Toggle both elements

Accordion example

Using the card component, you can extend the default collapse behavior to create an accordion.

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

Accessibility

Be sure to add aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded=»false» . If you’ve set the collapsible element to be open by default using the show class, set aria-expanded=»true» on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsbile element). If the control element’s HTML element is not a button (e.g., an or

If your control element is targeting a single collapsible element – i.e. the data-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.

Note that Bootstrap’s current implementation does not cover the various keyboard interactions described in the WAI-ARIA Authoring Practices 1.1 accordion pattern — you will need to include these yourself with custom JavaScript.

Usage

The collapse plugin utilizes a few classes to handle the heavy lifting:

• .collapse hides the content
• .collapse.show shows the content
• .collapsing is added when the transition starts, and removed when it finishes

These classes can be found in _transitions.scss .

Via data attributes

Just add data-toggle=»collapse» and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you’d like it to default open, add the additional class show .

To add accordion-like group management to a collapsible area, add the data attribute data-parent=»#selector» . Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data- , as in data-parent=»» .

Name	Type	Default	Description
parent	selector | jQuery object | DOM element	false	If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior — this is dependent on the card class). The attribute has to be set on the target collapsible area.
toggle	boolean	true	Toggles the collapsible element on invocation

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object .

.collapse(‘toggle’)

Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the shown.bs.collapse or hidden.bs.collapse event occurs).

.collapse(‘show’)

Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (i.e. before the shown.bs.collapse event occurs).

.collapse(‘hide’)

Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (i.e. before the hidden.bs.collapse event occurs).

.collapse(‘dispose’)

Destroys an element’s collapse.

Events

Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.

Источник