Bootstrap Collapse и его использование для создания аккордеона

В этой статье познакомимся с компонентом Collapse, который предназначен для плавного сворачивания и разворачивания контента. А также его использование для создания аккордеона.
Компонент Collapse
Collapse – это компонент, который написан на JavaScript и предназначен для плавного сворачивания и разворачивания содержимого элемента.

Обычно данное действие происходит при нажатии на какой-либо элемент, например <a>
или <button>
.
Привязка этого действия к элементу выполняется посредством добавления к нему следующих data-атрибутов:
data-bs-toggle="collapse"
;data-bs-target="#target"
илиhref="#target"
(#target
- это селектор того элемента, видимостью контента которого нужно управлять, т.е. сворачивать или разворачивать его).
Например:

<!-- Bootstrap v5 -->
<!-- Ссылка для переключения видимости #target -->
<a class="btn btn-primary" data-bs-toggle="collapse" href="#target">Collapse</a>
<a class="btn btn-secondary" data-bs-toggle="collapse" href="#" data-bs-target="#target">Collapse</a>
<!-- Кнопка для переключения видимости #target -->
<button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target="#target">Collapse</button>
<!-- #target -->
<div class="collapse" id="target">
<div class="card card-body">...</div>
</div>
В Bootstrap v4 или v3 атрибуты data-bs-toggle
и data-bs-target
указываются без -bs
:
<!-- Bootstrap v4 -->
<!-- Ссылка для переключения видимости #target -->
<a class="btn btn-primary" data-toggle="collapse" href="#target">Collapse</a>
<a class="btn btn-secondary" data-toggle="collapse" href="#" data-target="#target">Collapse</a>
<!-- Кнопка для переключения видимости #target -->
<button class="btn btn-success" type="button" data-toggle="collapse" data-target="#target">Collapse</button>
<!-- #target -->
<div class="collapse" id="target">
<div class="card card-body">...</div>
</div>
Если в data-bs-target
(в Bootstrap v3 или v4: data-target
) или href
указать в качестве селектора, например, класс, то данный элемент при нажатии на него будет одновременно переключать видимость несколько элементов, имеющих него.

<!-- Bootstrap v5 -->
<!-- Ссылка для переключения видимости .target -->
<a class="btn btn-primary" data-bs-toggle="collapse" href="#" data-bs-target=".target">collapse all</a>
<!-- Ссылка для переключения видимости #target-1 -->
<a class="btn btn-secondary" data-bs-toggle="collapse" href="#" data-bs-target="#target-1">collapse #target-1</a>
<!-- Ссылка для переключения видимости #target-2 -->
<a class="btn btn-success" data-bs-toggle="collapse" href="#" data-bs-target="#target-2">collapse #target-2</a>
<!-- #target-1 -->
<div class="collapse target" id="target-1">
<div class="card card-body">...</div>
</div>
<!-- #target-2 -->
<div class="collapse target" id="target-2">
<div class="card card-body">...</div>
</div>
Сворачивание и разворачивание элемента выполняется с анимацией: значение height
изменяется от текущего значения до 0 или наоборот. Учитывая, как CSS обрабатывает анимацию, вы не можете использовать padding
для элемента .collapse
. Данный элемент следует использовать как обёртку.
Компонент Collapse использует несколько классов:
collapse
– контент скрыт;collapse
иshow
– контент отображается (при одновременной установке этих двух классов);collapsing
– добавляется, когда переход начинается, и удаляется, когда он заканчивается.
Если вы хотите чтобы collapse-элемент по умолчанию был открыт, то дополнительно добавьте к нему класс show
:
<!-- collapse-элемент -->
<div class="collapse show" id="target">
<div class="card card-body">...</div>
</div>
Управление collapse-элементом через JavaScript
Кроме привязки элементов через data-атрибуты, управлять видимостью collapse-элементов можно также с помощью JavaScript.
Пример переключения отображения #target
при нажатии на #btn-target
с помощью JavaScript:

<!-- Bootstrap v5 -->
<!-- Ссылка для переключения видимости #target -->
<a class="btn btn-primary" id="btn-target">Collapse</a>
<!-- #target -->
<div class="collapse" id="target">
<div class="card card-body">...</div>
</div>
<script>
const collapseElem = document.querySelector('#target');
const collapse = new bootstrap.Collapse(collapseElem, {toggle: false});
document.querySelector('#btn-target').addEventListener('click', (e) => {
e.preventDefault();
// сворачиваем или разворачиваем collapse-элемент
collapse.toggle();
});
</script>
Этот пример на Bootstrap 4:
<!-- Bootstrap v4 -->
<!-- Ссылка для переключения видимости #target -->
<a class="btn btn-primary" id="btn-target">Collapse</a>
<!-- #target -->
<div class="collapse" id="target">
<div class="card card-body">...</div>
</div>
<script>
$('#btn-target').click((e) => {
e.preventDefault();
// сворачиваем или разворачиваем collapse-элемент
$('#target').collapse('toggle');
});
</script>
При активировании контента в качестве collapse-элемента мы можем передать аргументы:
// Bootstrap v5
const collapseElem = document.querySelector('#target');
const collapse = new bootstrap.Collapse(collapseElem, {
parent: false,
toggle: true
});
// Bootstrap v4
$('#target').collapse({
parent: false,
toggle: true
})
Параметр parent
(значение по умолчанию false
) позволяет указать родитель. В этом случае при открытии collapse-элемента, все остальные, находящиеся внутри него, будут автоматически закрываться.

<!-- Bootstrap v5 -->
<!-- Ссылки для переключения видимости collapse-элементов -->
<a class="btn btn-primary btn-target" data-target="#target-1">#target-1</a>
<a class="btn btn-primary btn-target" data-target="#target-2">#target-2</a>
<a class="btn btn-primary btn-target" data-target="#target-3">#target-3</a>
<!-- #target-1, #target-2, #target-3 -->
<div id="target-container">
<div class="row">
<div class="col">
<div class="collapse" id="target-1">
<div class="card card-body">...</div>
</div>
</div>
<div class="col">
<div class="collapse" id="target-2">
<div class="card card-body">...</div>
</div>
</div>
<div class="col">
<div class="collapse" id="target-3">
<div class="card card-body">...</div>
</div>
</div>
</div>
</div>
<script>
const collapseElements = document.querySelectorAll('#target-container .collapse');
collapseElements.forEach(collapseEl => {
new bootstrap.Collapse(collapseEl, { toggle: false, parent: '#target-container' });
})
document.addEventListener('click', (e) => {
if (!e.target.dataset.target) {
return;
}
const collapseElement = document.querySelector(e.target.dataset.target);
const collapse = bootstrap.Collapse.getInstance(collapseElement);
collapse.toggle();
});
</script>
Этот пример на Bootstrap 4: открыть
Параметр toggle
(значение по умолчанию true
) позволяет установить необходимо ли переключать collapse-элемент при инициализации.
Эти параметры также можно установить с помощью data-атрибутов
. Для этого добавьте перед именем параметра data-
. Например: data-parent="#target-container"
, data-toggle="false"
.
<div class="collapse" data-parent="#target-container" id="target-1">
...
</div>
Горизонтальный режим
В Bootstrap 5 компонент Collapse также поддерживает горизонтальный режим сворачивания и разворачивания контента. Осуществляется это посредством добавления класса collapse-horizontal
и указания ширины для элемента, непосредственного содержащего контент.

<!-- Bootstrap v5 -->
<!-- toggle #collapse -->
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapse">Collapse</a>
<!-- #collapse с классом collapse-horizontal -->
<div class="collapse collapse-horizontal" id="collapse">
<!-- ширина: 300px -->
<div class="card card-body" style="width: 300px;">...</div>
</div>
Методы компонента Collapse
Компонент Collapse имеет следующие методы:
toggle
– скрывает или отображает контент;show
– показывает контент;hide
– скрывает контент;dispose
– уничтожает collapse-элемент (удаляет данные сохраненные в DOM элементе);getInstance
(только в Bootstrap v5) – статический метод, который позволяет вам получить экземпляр Collapse, связанный с DOM-элементом;getOrCreateInstance
(только в Bootstrap v5) – статический метод, который возвращает экземпляр Collapse, связанный с DOM-элементом, или создает новый, если этот элемент не был инициализирован как Collapse.
Использование методов для управления collapse-элементом:

<!-- Bootstrap 5 -->
<a class="btn btn-primary btn-toggle">toggle</a>
<a class="btn btn-primary btn-show">show</a>
<a class="btn btn-primary btn-hide">hide</a>
<!-- collapse-элемент -->
<div class="collapse" id="target">
<div class="card card-body">...</div>
</div>
<script>
const btnToggle = document.querySelector('.btn-toggle');
const btnShow = document.querySelector('.btn-show');
const btnHide = document.querySelector('.btn-hide');
const collapseElement = document.querySelector('#target');
const collapse = new bootstrap.Collapse(collapseElement, { toggle: false });
btnToggle.addEventListener('click', (e) => {
e.preventDefault();
collapse.toggle();
});
btnShow.addEventListener('click', (e) => {
e.preventDefault();
collapse.show();
});
btnHide.addEventListener('click', (e) => {
e.preventDefault();
collapse.hide();
});
</script>
Этот пример на Bootstrap 4:
<!-- Bootstrap 4 -->
<a class="btn btn-primary btn-toggle">toggle</a>
<a class="btn btn-primary btn-show">show</a>
<a class="btn btn-primary btn-hide">hide</a>
<!-- collapse-элемент -->
<div class="collapse" id="target">
<div class="card card-body">...</div>
</div>
<script>
$('#target').collapse({ toggle: false });
$('.btn-toggle').click(e => {
e.preventDefault();
$('#target').collapse('toggle');
});
$('.btn-show').click(e => {
e.preventDefault();
$('#target').collapse('show');
});
$('.btn-hide').click(e => {
e.preventDefault();
$('#target').collapse('hide');
});
</script>
Методы Bootstrap 5 getInstance
и getOrCreateInstance
предназначены для получения экземпляра bootstrap.Collapse
. Кроме этого, последний метод ещё выполняет создание экземпляра bootstrap.Collapse
, если он не создан для указанного элемента.
Пример, в котором будем переключать видимость collapse-элементов каждые 5 секунд. Получать экземпляры bootstrap.Collapse
, связанные с указанными элементами, будем с помощью указанных выше методов.
<!-- Bootstrap 5 -->
<div class="collapse" id="collapse-1">...</div>
<div class="collapse" id="collapse-2">...</div>
<script>
// создадим bootstrap.Collapse связанный с #collapse-1
new bootstrap.Collapse(document.querySelector('#collapse-1'), { toggle: false });
window.setInterval(() => {
// получим bootstrap.Collapse связанный с #collapse-1
const collapse1 = bootstrap.Collapse.getInstance('#collapse-1');
// переключим видимость #collapse-1
collapse1.toggle();
// получим bootstrap.Collapse связанный с #collapse-2 (если его нет, то создадим его)
const collapse2 = bootstrap.Collapse.getOrCreateInstance('#collapse-2');
// переключим видимость #collapse-2
collapse2.toggle();
}, 5000);
</script>
Этот пример на Bootstrap 4:
<!-- Bootstrap 4 -->
<div class="collapse" id="collapse-1">...</div>
<div class="collapse" id="collapse-2">...</div>
<script>
// инициализируем #collapse-1 как collapse-элемент
$('#collpase-1').collapse({ toggle: false });
window.setInterval(() => {
// получим collapse-элемент и переключим его видимость
$('#collapse-1').collapse('toggle');
// получим collapse-элемент (если он не инициализирован, то инициализируем его как collapse-элемент) и переключим его видимость
$('#collapse-2').collapse('toggle');
// переключим видимость #collapse-2
}, 5000);
</script>
События компонента Collapse
Collapse имеет следующие события:
show.bs.collapse
– срабатывает сразу после вызова методаshow
(т.е. перед началом разворачивания);shown.bs.collapse
– генерируется, когда collapse-элемент станет полностью видимым для пользователя (т.е. после того как полностью завершится CSS переход);hide.bs.collapse
– генерируется сразу после вызоваhide
(т.е. перед началом сворачивания);hidden.bs.collapse
– сработает, когда collapse-элемент будет полностью скрыт от пользователя (т.е. после завершения CSS перехода).
Пример, в котором будем добавлять классы к collapse-элементу (а точнее к .card
, расположенным в нём) для изменения цвета фона и текста, после того как он будет полностью виден. А перед началом сворачивания будем удалять их.

<!-- Bootstrap 5 -->
<a class="btn btn-primary" href="#" data-bs-toggle="collapse" data-bs-target="#collapse-1">#collapse-1</a>
<div class="collapse mb-3" id="collapse-1">
<div class="card card-body">...</div>
</div>
<script>
// получаем элемент #collapse-1
const collapse = document.querySelector('#collapse-1')
// после разворачивания (когда содержимое #collapse-1 станет полностью видно)
collapse.addEventListener('shown.bs.collapse', (e) => {
const cardEl = e.target.querySelector('.card');
cardEl.classList.add('bg-primary');
cardEl.classList.add('text-white');
});
// перед началом сворачивания #collapse-1
collapse.addEventListener('hide.bs.collapse', (e) => {
const cardEl = e.target.querySelector('.card');
cardEl.classList.remove('bg-primary');
cardEl.classList.remove('text-white');
});
</script>
Этот пример на Bootstrap 4:
<!-- Bootstrap 4 -->
<a class="btn btn-primary" href="#" data--toggle="collapse" data-target="#collapse-1">#collapse-1</a>
<div class="collapse mb-3" id="collapse-1">
<div class="card card-body">...</div>
</div>
<script>
const collapse = $('#collapse-1')
collapse.on('shown.bs.collapse', (e) => {
const cardEl = $(e.target).find('.card');
cardEl.addClass('bg-primary text-white');
});
collapse.on('hide.bs.collapse', (e) => {
const cardEl = $(e.target).find('.card');
cardEl.removeClass('bg-primary text-white');
});
</script>
Аккордеон
Компонент Accordion в Bootstrap построен на базе компонента Collapse.
Аккордеон обычно применяется на сайте для создания вертикального меню, каждый пункт которого можно развернуть и свернуть.
Пример аккордеона на Bootstrap 5:

<!-- Bootstrap 5 -->
<div class="accordion" id="menu">
<!-- item-1 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#item-1">
Item 1
</button>
</h2>
<!-- класс show делает пункт открытым -->
<div id="item-1" class="accordion-collapse collapse show" data-bs-parent="#menu">
<div class="accordion-body">
Content 1...
</div>
</div>
</div>
<!-- item-2 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-2">
Item 2
</button>
</h2>
<div id="item-2" class="accordion-collapse collapse" data-bs-parent="#menu">
<div class="accordion-body">
Content 2...
</div>
</div>
</div>
...
</div>
В Accordion collapse-элемент, который должен быть открыт по умолчанию, помечается с помощью класса show
.
Реализация этого примера на Bootstrap 4:
<!-- Bootstrap 4 -->
<div class="accordion" id="menu">
<!-- item-1 -->
<div class="card">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#item-1">
Item 1
</button>
</h2>
</div>
<!-- класс show делает пункт открытым -->
<div id="item-1" class="collapse show" data-parent="#menu">
<div class="card-body">
Content 1...
</div>
</div>
</div>
<!-- item-2 -->
<div class="card">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#item-2">
Item 2
</button>
</h2>
</div>
<div id="item-2" class="collapse" data-parent="#menu">
<div class="card-body">
Content 2...
</div>
</div>
</div>
...
</div>
Если мы хотим, чтобы при открытии одного collapse-элемента другие сворачивались, нужно их при помощи атрибута data-bs-parent
(в Bootstrap v3 и v4: data-parent
) привязать к одному родителю:
<!-- Bootstrap 5 -->
<!-- элемент, который выступает в качестве родителя (id="menu") -->
<div class="accordion" id="menu">
...
<div id="item-1" class="accordion-collapse collapse show" data-bs-parent="#menu">
...
<div id="item-2" class="accordion-collapse collapse" data-bs-parent="#menu">
...
</div>
<!-- Bootstrap 4 -->
<!-- элемент, который выступает в качестве родителя (id="menu") -->
<div class="accordion" id="menu">
...
<div id="item-1" class="collapse show" data-parent="#menu">
...
<div id="item-2" class="collapse" data-parent="#menu">
...
</div>
Если это не нужно, то тогда вышеприведённый пример можно записать так:
<!-- Bootstrap 5 -->
<div class="accordion">
<!-- item-1 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#item-1">
Item 1
</button>
</h2>
<!-- класс show делает пункт открытым -->
<div id="item-1" class="accordion-collapse collapse show">
<div class="accordion-body">
Content 1...
</div>
</div>
</div>
<!-- item-2 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-2">
Item 2
</button>
</h2>
<div id="item-2" class="accordion-collapse collapse">
<div class="accordion-body">
Content 2...
</div>
</div>
</div>
...
</div>
На Bootstrap 4:
<!-- Bootstrap 4 -->
<div class="accordion">
<!-- item-1 -->
<div class="card">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#item-1">
Item 1
</button>
</h2>
</div>
<!-- класс show делает пункт открытым -->
<div id="item-1" class="collapse show">
<div class="card-body">
Content 1...
</div>
</div>
</div>
<!-- item-2 -->
<div class="card">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#item-2">
Item 2
</button>
</h2>
</div>
<div id="item-2" class="collapse">
<div class="card-body">
Content 2...
</div>
</div>
</div>
...
</div>
В Bootstrap 5 имеется класс accordion-flush
. Если его добавить к accordion
то он удалит дефолтный цвет фона, некоторые закругленные углы.

<!-- Bootstrap 5 -->
<div class="accordion accordion-flush" id="menu">
...
</div>
Пример кода для динамического создания аккордеона:
<?php
// сервер
$contents = [
[
'title' => '...',
'content' => '...'
],
...
];
echo json_encode($contents);
<!-- клиент -->
<div class="container py-3"></div>
<script>
const htmlItem = `<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-{{index}}">
{{title}}
</button>
</h2>
<div id="item-{{index}}" class="accordion-collapse collapse" data-bs-parent="#menu">
<div class="accordion-body">
{{content}}
</div>
</div>
</div>`;
const accordionEl = document.createElement('div');
accordionEl.id = 'menu';
accordionEl.classList.add('accordion');
let html = '';
fetch('/examples/json/get-content.php')
.then((response) => {
return response.json();
})
.then((data) => {
data.forEach((item, index) => {
let itemStr = htmlItem.replace('{{title}}', item['title']);
itemStr = itemStr.replace('{{content}}', item['content']);
itemStr = itemStr.replaceAll('{{index}}', index + 1);
html += itemStr;
});
accordionEl.innerHTML = html;
document.querySelector('.container').append(accordionEl);
});
</script>
Комментарии: 98
Александр, выручайте! Когда- то Вы мне помогли, теперь еще раз зарегистрировался на Вашем сайте (старый пароль забыл), потому, надеюсь на Вашу помощь. Бьюсь над проблемой аккордиона на движке друпал 8.
Проблема в том, что все работает, но не так как хотелось бы. Дело в том, что при нажатии на панель все открывается как надо, но скрол отбрасывает в начало страницы и приходится опять прокручивать до того места, где расположен блок, чтоб посмотреть результат... Что очень неудобно... Я думаю. что дело именно в движке друпал 8, потому, что на друпал 7 все работает как надо. И через Views bootstrap3, да я и просто с официального сайта: https://getbootstrap.com/docs/3.3/javascript/#collapse-example-accordionкогда делаешь простым блоком.
Вопрос такой: можно ли сделать какой- нибудь костыль прям коде блока, чтобы решить эту проблему? Чтобы оставаться на месте и смотреть сразу то, что открылось, а не прокручивать всякий раз с начала страницы до того места где находится блок?Добрый день! Так понимаю, вам нужно узнать высоту прокрутки, а затем при повторном открытии страницы установить её на эту величину:
Пример на CodePen: codepen.io/itchief/pen/jOeXJVL
Пока один вариант меня посетил. Сделать 2 блока и просто один из них скрывать с помощью css на разных разрешениях. Возможно есть иное решение вопроса?
Можно сделать так:
Готовый пример доступен по этой ссылке.
На WP добавляю блок аккордеон в редактор, так их может быть несколько на странице. С помощью JS? Например $this?
Как вариант можно просто поменять программно id и значение элементов a с href, на которые они ссылаются:
При этом стандартный механизм Bootstrap останется.
Если нужно как-то по-другому, то тогда нет смысла использовать стандартный механизм Bootstrap, можно вместо него написать своё решение.
Меню у меня как в «картинке 1»
нужно чтобы при переходе на страницу «КОЗЫРЬКИ И НАВЕСЫ» меню выглядела как в «картинке 2».
Спасибо)
Заготовку можно взять по адресу: jsfiddle.net/itchief/ktb3tep4/
jsfiddle.net/ktb3tep4/4/
Скрипт, который необходимо будет добавить ко всем страницам (на которых присутствует аккордеон):
Второй день бьюсь над простейшем казалось бы заданием, необходимо изменять иконку при открытии/закрытии accordion.
Пользовался вашим руководством выше в комментариях, не выходит, в коде два accordion и две иконки, при нажатии на одну, меняются обе.
Пытаюсь решить проблему с меню на одностраничном сайте, дело в том, что хотелось бы, чтобы при нажатии на пункты меню в мобильной версии оно сворачилось — переход по ссылкам в меню с эффектом прокрутки до нужного ID.
Моё меню
Уже много всего перелопатил но никак не могу получить результат. Пытался играть с dropdown-menu, но вкупе с классами анимации прокрутки все перестает работать. Я уже обрадовался, кода нашел у вас способ с помощью скрипта
Но при таком варианте сворачивание и разворачивание происходит при нажатии на любой ссылке на сайте, а нужно, только при нажатии в выпадающем меню в мобилной версии.
Подскажите в этой проблеме, если можете.
Вопрос такой — можно ли сделать, чтобы положения аккордеона запоминались? Например, у меня на странице закрытый блок
Пользователь зашёл на страницу, раскрыл его. Но когда обновил старицу — он остался раскрытым? И наоборот, если есть раскрытый, пользователь его закрыл, обновил страницу (или полазил по другим и вернулся на эту), а аккордеон остался в том же положении, в котором его оставил пользователь. Предполагаю, что это как-то можно сделать с помощью php или js с использованием куки, но как именно — не знаю…
$(function() {
idCollapse = 'collapse1';
$('#'+idCollapse).on('shown.bs.collapse', function () {
localStorage.setItem(idCollapse, 'in');
console.log('dd');
});
$('#'+idCollapse).on('hidden.bs.collapse', function () {
localStorage.removeItem(idCollapse);
});
if (localStorage.getItem(idCollapse) != null) {
$('#'+idCollapse).addClass('in');
} else {
$('#'+idCollapse).removeClass('in');
}
idCollapse = 'collapse2';
$('#'+idCollapse).on('shown.bs.collapse', function () {
localStorage.setItem(idCollapse, 'in');
console.log('dd');
});
$('#'+idCollapse).on('hidden.bs.collapse', function () {
localStorage.removeItem(idCollapse);
});
if (localStorage.getItem(idCollapse) != null) {
$('#'+idCollapse).addClass('in');
} else {
$('#'+idCollapse).removeClass('in');
}
idCollapse = 'collapse3';
$('#'+idCollapse).on('shown.bs.collapse', function () {
localStorage.setItem(idCollapse, 'in');
console.log('dd');
});
$('#'+idCollapse).on('hidden.bs.collapse', function () {
localStorage.removeItem(idCollapse);
});
if (localStorage.getItem(idCollapse) != null) {
$('#'+idCollapse).addClass('in');
} else {
$('#'+idCollapse).removeClass('in');
}
});
У меня акардеон типа:
Куда тут можно вставить data-parent, чтобы при открытии второго элемента первый закрылся?
В этом случае можно использовать следующий скрипт:
Если не так, то обновите версию Bootstrap 3 на последнюю 3.3.7.
Если это не возможно, то попробуйте так:
Возник вопрос касательно аккордеона и высоты блоков после его сворачивания, как сделать так, чтобы высота страницы возвращалась на начальную позицию. Проблема на скрине. Заранее спасибо.
Пытаюсь сохранить состояние открытой панели аккордиона через cookie. Но никак не могу добиться чтобы нужная панель разворачивалась при перезагрузке страницы:
Если в push(); переменной active присваиваю 2, то при активации функции все работает, а если var active = GetCookie(«accordion»); то не работает! В чем проблема-то?
UPD: написав пост, сам себе ответил! При var active = parseInt( GetCookie(«accordion») ); все заработало.
А как можно сделать все лаконичнее???
Оптимизировать код можно как-то так:
Например, можно реализовать так.
1. Создать необходимые файлы с содержимым на сервере. Например, content1.txt, content2.txt и content3.txt.
2. На необходимую страницу (например, accordeon.html) вставить HTML-код аккордеона
3. В эту же страницу (accordeon.html) добавить сценарий JavaScript, который и будеть выполнять всю эту «магию»:
Файл accordeon.html и файлы с содержимым (content1.txt, content2.txt и content3.txt) должны находиться в одном каталоге.
Проверять работоспособность примера необходимо на сервере.
п.с. в адресной строке браузера видно как происходит переход (#collapse1,#collapse2,#collapse3), но панели не раскрываются.
На локальном теперь все работает, но на вордпрессе, вообще панелей нет (только открытый текст — заголовок, содержимое). Установил плагин Bootstrap 3 Shortcodes, потом Accordion Shortcodes — ситуация не меняется.
Спасибо большое за вашу помощь! Возникла еще одна проблема. Мобильное меню использует тот же плагин collapse. Как можно реализовать в мобильном меню добавление/удаление класса для (fa-chevron) как в предыдущем примере. И раскрытие вложенных меню более плавными. Помогите пожалуйста!
Добавление значка к dropdown navbar (аналогично вышеприведённому коду):
Управление отображением иконок вложенных меню (добавление и удаление классов):
Подскажите пожалуйста, как сделать правильно следующее…
В этой конструкции надо чтоб при раскрытом блоке span class=«chevron» добавлялся класс chevron-up, пробовал на js сделать так
Вроде работает но не правильно! Надо чтоб при развернутом блоке добавлялся класс, а при сворачивании удалялся. Не могу решить…
Если же вы хотите изменять иконку, то следует выполнить следующим образом:
После этого должно заработать.
Эту ошибку заметил еще когда первый пост делал.
Спасибо вам огромное!
"… Следующий пример демонстрирует методы Bootstrap для сворачиваемых элементов. Нажмите на кнопки чтобы увидеть работу этих методов."
над этим текстом есть кнопки, но нажатие на них не демонстрирует заявленного показа.
Я что-то не то делаю или что-то поломалось?
Извините, за возможно глупый вопрос. Не пойму, за счет чего реализована анимация раскрытия 'collapse блока'. Скрипт добавляет height:auto (в закрытом состоянии height:0px), но это свойство (как я понимаю) при помощи css не анимируется. Где магия?
И еще один вопрос. Как сделать чтобы 'collapse- блок' закрывался по клику вне блока, по аналогии с dropdown-menu?
Спасибо, вы уже очень много раз мне помогли…
Для скрытия блока collapse (при клике вне его) необходимо добавить следующий сценарий JavaScript на страницу:
А можно ли так сделать чтобы при открытии аккордеон не сдвигал все вниз а открывался поверх контента который идет ниже по структуре?
Т.е. помещаем карусель в блок div и задаём ему относительное позиционирование и необходимую высоту. А карусели — абсолютное позиционирование.
Аккордеон и пункты меню будут на одной странице.
Нужно сделать так, чтобы когда кликали на «Вкладка 1» Открывался пункт меню «Вкладка 1» с содержимым текстом, и так же для «Вкладка 2» и т.д
Задача: имеется список элементов(платежи в системе, количество их не известно), он обновляется/добавляется автоматически по оплате. При нажатии на элемент, должен выпадать «аккордеон» с подробной информацией о платеже.
Проблема: при нажатии на любой существующий платеж, открывается первый и только первый элемент из всего списка…
если, я правильно понимаю, то, у каждого элемента для открытия должен быть уникальный id… такой синтаксис не правильный
или это решается совсем другим образом?
ba.streetsites.ru/test2.html
Код:
Решение будет следующим:
Есть 5 ссылок на странице1. Есть аккордеон на странице2. Как сделать чтобы при переходе на страницу2 с аккордеоном открывался блок с той ссылкой по которой мы кликнули на странице1? Типа ссылка3 открывает содержимое блока3.
На второй странице (index2.html) добавить скрипт. Он будет считывать хэш и активировать ту или иную вкладку. Если хэш не найден, то будет активировать 1 блок.
При переходе по ссылке с хэш открывается нужная вкладка.
Но далее если на странице есть меню с другими вкладками, то они не работают.
Скрипт читает url в котором #collapseOne и всегда показывает этот слой.
Видимо надо сделать как то по другому.
Если хэша нет, то как бы и скрипта нет. Т.к. нужный открытый слой можно выбрать и самому параметром in.
Если есть хэш, то открыть нужный слой и как бы убрать скрипт из работы.
Что бы он срабатывал 1 раз при загрузке страницы и больше не мешал отрабатывать бутстрапу.
В общем я подошел по другому к решению этого вопроса. Я решил не вмешиваться в работу collapse.js, тем паче таким грубым способом, меняя в обход класс in.
Я с эмулировал работу плагина через событие клика.
Остается только добавить в ссылку id. Если hash = #el1, то id = el1
Еще раз спасибо!!!
Можно ли сделать активным все поле как ссылку для открытия Аккордеона, не наводя на саму ссылку как в примере 1 на этой странице… ( Заголовок 1 панели )?
HTML-код аккордеона
у меня есть два блока, при нажатии на один второй должен быть скрытым, и наоборот при нажатии 2ого первый скрываться.
Как такое можно осуществить?
Для этого необходимо написать код на JavaScript (+jQuery):
У меня возник вопрос: как сделать так что бы данные списки в меню при загрузке страницы были закрыты (сейчас при загрузке страницы — 1ый список всегда открыт, после переходов уже все поочередно открывается и закрывается)
подскажите как сделать чтобы активное (раскрытое) поле panel-heading подсвечивалось заданным цветом?
Это можно выполнить с помощью скрипта:
В этом случае скрипт будет такой:
И соответственно необходимо добавить в CSS:
Если Вы хотите её формировать, то выберите для этого подходящий сниппет…
скажи а можно ли сделать чтобы свертывание и развертывание
происходило по нажатии по панели, сейчас по тексту в панели.
Для этого необходимо все data-атрибуты добавлять к заголовку панели.
Например:
Например, как-то так:
Такая ситуация:
Одностраничный сайт.
Стандартное меню bootstrap.
При нажатии на пункт меню с мобильного, само меню не сворачивается, а остается поверх контента.
Видел решение, когда меню при раскрытии сдвигает контент, возможно есть какие то другие решения? Подскажите пожалуйста
Ссылка на скрин — yadi.sk/i/caHPBx4UiGWF8
В Twitter Bootstrap такая настройка выставлена по умолчанию. Т.е. когда Вы нажимаете на пункт меню, оно остаётся открытым.
Для того чтобы данное меню можно было использовать на одностраничных сайтах можно воспользоваться следующим решением (т.е. оно будет сворачиваться всякий раз, когда пользователь нажимает на пункт, содержащий ссылку):
Меню на сайтах также можно выполнить в виде кнопок, расположенных горизонтально или вертикально. Кроме этого очень часто на сайтах еще используют выезжающие меню с левой или правой стороны.
А пока можете поискать их в интернете, там их достаточно много…
Код CSS:
Код HTML:
Панель отображается открытой, но при нажатии не сворачивается/разворачивается.