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

Сегодня мы познакомимся с возможностями Twitter Bootstrap для создания аккордеона.
Создание аккордеона с помощью Twitter Bootstrap
Аккордеон обычно применяется для создания на сайте меню или навигации, в которые необходимо поместить много контента и навигационные списки. Следующий пример покажет вам, как создать аккордеон, используя компонент collapse (сворачивание):
<div class="panel-group" id="accordion"> <!-- 1 панель --> <div class="panel panel-default"> <!-- Заголовок 1 панели --> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. Bootstrap 3 - Введение</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <!-- Содержимое 1 панели --> <div class="panel-body"> <p>Bootstrap 3 - это framework для быстрого и гармоничного создания дизайна сайта. Начать изучать эту технологию лучше с <a href="http://itchief.ru/lessons/bootstrap-3/19-introduction-to-twitter-bootstrap-3" target="_blank">урока</a>, который познакомит вас с её возможностями и преимуществами.</p> </div> </div> </div> <!-- 2 панель --> <div class="panel panel-default"> <!-- Заголовок 2 панели --> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. Bootstrap 3 - Начало работы</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <!-- Содержимое 2 панели --> <div class="panel-body"> <p>Изучение технологии лучше всего начать с простого <a href="http://itchief.ru/lessons/bootstrap-3/20-lesson-2-getting-started-with-twitter-bootstrap-3" target="_blank">урока</a>. На котором изучается как подключить Twitter Bootstrap к своему проекту и вывести с помощью него простейший текст.</p> </div> </div> </div> <!-- 3 панель --> <div class="panel panel-default"> <!-- Заголовок 3 панели --> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. Bootstrap 3 - Создание сайта</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <!-- Содержимое 3 панели --> <div class="panel-body"> <p>Создание сайта - это трудоемкий процесс, который состоит из нескольких этапов. В качестве примера рассмотрим создание сайта визитки на этом <a href="http://itchief.ru/lessons/bootstrap-3/website-creation-business-cards-(part-1)" target="_blank">уроке</a>, в котором рассмотрим процесс загрузки необходимых пакетов и проектирования макета сайта.</p> </div> </div> </div> </div>

Разворачивание и сворачивание панелей аккордеона через атрибуты data
Twitter Bootstrap позволяет разворачивать и сворачивать любую панель аккордеона без написания кода на языке JavaScript. Данную возможность Twitter Bootstrap мы уже рассмотрели выше, теперь давайте узнаем какие прикладные интерфейсы API Data за это отвечают.
Но перед тем как перейти к рассмотрению атрибутов data
, давайте познакомимся поближе с работой компонента аккордеон. Аккордеон состоит из панелей, каждая из которых, в свою очередь, состоит из заголовка и содержимого. В заголовке обычно располагается ссылка или кнопка, при нажатии на которую происходит сворачивание или разворачивание содержимого.
Атрибут data-toggle="collapse"
необходимо добавить к элементу управления (например, кнопка или ссылка, нажав на которую вы хотите свернуть другой элемент, содержащий контент). А также необходимо указать какой именно элемент вы хотите свернуть, для этого необходимо добавить к элементу управления атрибутом .collapse
к сворачиваемому элементу. Если вы хотите, чтобы элемент с содержимым по умолчанию был открыт, то необходимо дополнительно добавить класс .in
.
<!-- HTML код управляемого элемента --> <input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#toggleSample" value="Элемент управления"> <!-- HTML код сворачиваемого элемента --> <div id="toggleSample" class="collapse in"> <p style="background: #F9F9F9; border: 1px solid #E1E1E8; margin: 10px 0; padding: 8px;"> На этом примере показана возможность сворачивания и разворачивания элемента с помощью data атрибутов. Нажмите на <b>кнопку</b>, чтобы увидеть этот эффект. </p> </div>
Разворачивание и сворачивание панелей аккордеона с помощью JavaScript
Вы также можете сворачивать и разворачивать панели аккордеона вручную с помощью кода JavaScript - для этого вызовите метод Bootstrap collapse() и укажите с помощью идентификатора (#id) или класса (.class) тот элемент, который необходимо развернуть и свернуть.
<script type="text/javascript"> $(document).ready(function(){ $(".btn").click(function(){ $("#toggleSample2").collapse('toggle'); }); }); </script> ... <!-- HTML код управляемого элемента --> <input type="button" class="btn btn-primary" value="Toggle Button"> <!-- HTML код сворачиваемого элемента --> <div id="toggleSample2" class="collapse in"><p>На этом примере показана возможность сворачивания и разворачивания элемента с помощью кода JavaScript. Нажмите на <b>кнопку</b>, чтобы увидеть этот эффект.</p></div>
Параметры
Есть определенные параметры, которые могут быть переданы методу 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') |
На следующим примере продемонстрированы использование различных методов для сворачиваемых элементов:
<script type="text/javascript"> $(document).ready(function(){ $(".toggle-false").click(function(){ $("#myMethod").collapse({ toggle: false }); }); $(".show-btn").click(function(){ $("#myMethod").collapse('show'); }); $(".hide-btn").click(function(){ $("#myMethod").collapse('hide'); }); $(".toggle-btn").click(function(){ $("#myMethod").collapse('toggle'); }); }); </script> <!-- HTML код управляемого элемента --> <input type="button" class="btn btn-primary toggle-false" value="Collapse с параметром toggle"> <input type="button" class="btn btn-primary show-btn" value="Метод Show"> <input type="button" class="btn btn-primary hide-btn" value="Метод Hide"> <input type="button" class="btn btn-primary toggle-btn" value="Метод Toggle"> <!-- Collapsible Element HTML --> <div id="myMethod"> <p style="background: #F9F9F9; border: 1px solid #E1E1E8; margin: 10px 0; padding: 8px;">Следующий пример демонстрирует методы Bootstrap для сворачиваемых элементов. Нажмите на кнопки чтобы увидеть работу этих методов.</p> </div>

События
Сворачиваемый элемент Bootstrap имеет несколько событий, которые возникают при наступлении определенных условий и, которые предназначены для расширения его функциональности.
Событие | Описание |
---|---|
show.bs.collapse | Это событие срабатывает сразу после вызова метода show(). |
shown.bs.collapse | Это событие срабатывает, когда сворачиваемый элемент становится виден для пользователя, т.е. когда будет завершён полностью процесс CSS для сворачиваемого элемента. |
hide.bs.collapse | Это событие срабатывает сразу после вызова метода hide. |
hidden.bs.collapse | Это событие сработает в тот момент, когда сворачиваемый элемент будет полностью скрыт от пользователя, т.е. событие будет ждать до тех пор, пока процесс CSS для сворачиваемого элемента будет полностью завершён. |
В следующем примере продемонстрирована возможность отображения предупреждающего сообщения для пользователя, когда он открывает сворачиваемый элемент, и он полностью завершил своё открытие.
<script type="text/javascript"> $(document).ready(function(){ $('#myEvent').on('shown.bs.collapse', function(){ alert('Сворачиваемый элемент полностью завершил своё открытие.'); }); }); </script> ... <!-- HTML код управляемого элемента --> <input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#myEvent" value="Элемент управления"> <!-- HTML код сворачиваемого элемента --> <div id="myEvent" class="collapse"><p style="background: #F9F9F9; border: 1px solid #E1E1E8; margin: 10px 0; padding: 8px;">На этом примере продемонстрирована возможность обработки события при полном открытии сворачиваемого элемента.</p></div>

Пока один вариант меня посетил. Сделать 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:
А пока можете поискать их в интернете, там их достаточно много…
Панель отображается открытой, но при нажатии не сворачивается/разворачивается.