Bootstrap аккордеон закрыт по умолчанию

Сделать аккордеон закрытым по умолчанию в Bootstrap

Я использую Bootstrap Accordion. Я хочу, чтобы все панели были закрыты по умолчанию, но мои панели начинают расширяться.

Вот мой код:

Я также использовал aria-expanded=»false» , но это не работает.

3 ответа

Эта строка кажется виновной:

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

Обратите внимание, что первая панель не имеет class=collapsed на его тег и имеет in класс на это

РЕДАКТИРОВАТЬ

Не могу сделать Bootply, продолжайте получать «Ошибка приложения».

Недавно работал с Bootstrap 4 и не мог выяснить, где было имя класса «in» (оно упоминается в нескольких ответах на похожие вопросы).

После долгих поисков заметил обновленную документацию, которая гласит:

Плагин коллапса использует несколько классов для работы с тяжелыми грузами:

.collapse скрывает содержимое

.collapse.show показывает содержание

.collapsing добавляется при запуске перехода и удаляется при его завершении

Итак, пример кода теперь выглядит примерно так:

Из чего, это важно немного:

Удаление имени класса «show» гарантирует, что аккордеон Bootstrap по умолчанию останется свернутым.

Источник

Сделать аккордеон закрытым по умолчанию в Bootstrap

Я использую Bootstrap Accordion. Я хочу, чтобы все панели были закрыты по умолчанию, но мои панели начинают расширяться.

Здесь мой код:

Я также использовал aria-expanded=»false» , но он не работает.

Эта строка кажется виновной:

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

Обратите внимание, что на первой панели нет тега class=collapsed на нем и имеет класс in на нем

ИЗМЕНИТЬ

Невозможно создать Bootply, продолжайте получать «Ошибка приложения».

Недавно работал с Bootstrap 4 и не мог выяснить, где было имя класса «in» (оно упоминается в нескольких ответах на похожие вопросы).

После долгих поисков заметил обновленную документацию, которая гласит:

Плагин коллапса использует несколько классов для работы с тяжелыми грузами:

.collapse скрывает содержимое

.collapse.show показывает содержание

.collapsing добавляется при запуске перехода и удаляется при его завершении

Итак, пример кода теперь выглядит примерно так:

Из чего, это важно немного:

Удаление имени класса «show» гарантирует, что аккордеон Bootstrap по умолчанию останется свернутым.

Источник

Сделать аккордеон закрытым по умолчанию в Bootstrap

Я использую Bootstrap Accordion. Я хочу, чтобы все панели были закрыты по умолчанию, но мои панели начинают расширяться.

Здесь мой код:

Я также использовал aria-expanded=»false» , но он не работает.

Эта строка кажется виновной:

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

Обратите внимание, что на первой панели нет тега class=collapsed на нем и имеет класс in на нем

ИЗМЕНИТЬ

Невозможно создать Bootply, продолжайте получать “Ошибка приложения”.

Недавно работал с Bootstrap 4 и не мог выяснить, где было имя класса “in” (оно упоминается в нескольких ответах на похожие вопросы).

После долгих поисков заметил обновленную документацию, которая гласит:

Плагин коллапса использует несколько классов для работы с тяжелыми грузами:

.collapse скрывает содержимое

.collapse.show показывает содержание

.collapsing добавляется при запуске перехода и удаляется при его завершении

Итак, пример кода теперь выглядит примерно так:

Из чего, это важно немного:

Удаление имени класса “show” гарантирует, что аккордеон Bootstrap по умолчанию останется свернутым.

Источник

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 для сворачиваемого элемента будет полностью завершён.

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

Источник

Bootstrap аккордеон закрыт по умолчанию

Вечные ссылки от 700 рублей, только тематические

Руководство Bootstrap Collapse и Accordion

1- Bootstrap Collapse

2- Много целей (Multi Targets)

Вы можете определить много целей (target) для одного button (или Link) с помощью использования jQuery Selector, это значит когда пользователь нажимает на button много целей будут скрыты или отображены.

3- Accordion

Accordion это компонент интерфейса, созданный из многих «.card» сложенных друг на друге вертикально. Каждый .card может быть расширен (expand) или уменьшен (collapse) в зависимости от конфигурации.

Это изображение структуры Accordion:
Пример кода:

Скачать файл бесплатно

Вы находитесь на странице скачивания файла. Кнопка загрузки внизу страницы. Если нет кнопки , значит нет файла. Нет файла — просьба сообщить администартору удобным способом. Спасибо большое за понимание!

Реклама — это вынужденная мера для поддержания проекта на плаву. Я не принуждаю Вас кликать по рекламным блокам. Если конечно она вас не заинтересовала.

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

Источник