Вопрос:
У меня есть один элемент аккордеона, который я использую для чтения/ссылки на странице.
Цель этого – щелкнуть по нему, чтобы прочитать больше, и последует несколько абзацев.
У меня есть эта работа, но мне нужно, чтобы она оставалась закрытой, когда страница загружается, в тот момент, когда страница загружается с открытием элемента.
Что я могу добавить, чтобы исправить это?
<div class=»accordionMod panel-group»> <div class=»accordion-item»> <h4 class=»accordion-toggle»>Read More / Less</h4> <section class=»accordion-inner panel-body»> <p>more info.</p> <h4 class=»title»>More titles</h4> <p>more content</p> </section> </div> </div> Ответ №1
Я думаю, что это сработает
<div class=»accordion» id=»myAccordion»> <div class=»accordion-group»> <div class=»accordion-heading»> <a class=»accordion-toggle» data-toggle=»collapse» data-parent=»#myAccordion» href=»#collapseOne»> Title </a> </div> <div id=»collapseOne» class=»accordion-body collapse»> <div class=»accordion-inner»> Content </div> </div> </div> <div class=»accordion-group»> <div class=»accordion-heading»> <a class=»accordion-toggle» data-toggle=»collapse» data-parent=»#myAccordion» href=»#collapseTwo»> Title </a> </div> <div id=»collapseTwo» class=»accordion-body collapse»> <div class=»accordion-inner»> Content </div> </div> </div> </div>
если вы добавите класс in accordion-body collapse он будет открыт по умолчанию.
Ответ №2
Похоже, вам не нужен аккордеон, который имеет несколько панелей, только один из которых может открываться одновременно. Вместо этого просто используйте collapse который позволяет вам переключать видимость раздела страницы.
Содержание
Видимость панели
В плагине сворачивания используется несколько классов для обработки тяжелого подъема:
- .collapse скрывает содержимое
- .collapse.in показывает содержимое
- .collapsing добавляется, когда начинается переход, и удаляется, когда он заканчивается
Таким образом, чтобы начать разрушилась, просто убедитесь, что дополнительный контент имеет класс collapse и не in
Простой HTML
Чтобы использовать коллапс, вам просто нужно указать data-toggle=»collapse» а затем указать спуск на селектор css раздела, который вы хотите переключить с использованием data-target.
Здесь пример с голыми костями, который просто раскрывает свернутую функциональность:
<a data-toggle=»collapse» data-target=»#ReadMoreInfo» href=»#»> Read More / Less </a> <div id=»ReadMoreInfo» class=»collapse»> <p> More Info Here </p> </div>
HTML с классами Bootstrap
Все остальные классы начальной загрузки предназначены только для того, чтобы сделать сборную панель похожим на складную панель. Я бы рекомендовал форматировать их так или сделать много пользовательской работы CSS. Даже если вы сами захотите сделать CSS, начать с этого шаблона, а затем переопределить стили лучше всего.
<div class=»panel panel-default»> <div class=»panel-heading»> <h4 class=»panel-title»> <a data-toggle=»collapse» data-target=»#ReadMoreInfo» href=»#ReadMoreInfo»> Read More / Less </a> </h4> </div> <div id=»ReadMoreInfo» class=»panel-collapse collapse»> <div class=»panel-body»> <p>more info.</p> <h4 class=»title»>More titles</h4> <p>more content</p> </div> </div> </div>
Рабочая демонстрация в jsFiddle
Снимок экрана:
Ответ №3
Удаление in классе не работало для меня в моем случае (хотя обычно это должно быть). Я просто искал ответ на этот вопрос вчера. Я использовал это, чтобы закрыть аккордеон по умолчанию:
$( document ).ready(function() { $(‘.collapse’).collapse({ toggle: false }); });
См. Также этот вопрос:
JQuery аккордеон не рушится по умолчанию
Ответ №4
если аккордеон со значком, добавьте свернутое имя класса в:
<a class=»accordion-toggle accordion-toggle-styled collapsed» >
и добавьте имя класса collapse в:
<div id=»collapse0″ class=»panel-collaps collapse»>
полный код:
<div class=»panel-group accordion» id=»accordion0″> <div class=»panel panel-default»> <div class=»panel-heading»> <h4 class=»panel-title»> <a class=»accordion-toggle accordion-toggle-styled collapsed» data-toggle=»collapse» data-parent=»#accordion0″ href=»#collapse0″> Collapsible Header Text </a> </h4> </div> <div id=»collapse_3_1″ class=»panel-collaps collapse»> <div class=»panel-body»> <p> body text </p> </div> </div> </div> </div>
