Аккордеон
Иногда нужно, чтобы при раскрытии одного спойлера, другие спойлеры скрывались.
Для этого спойлеры нужно поместить в один родительский элемент, например в секцию или в блок.
Этому родительскому элементу нужно добавить класс accordeon и на страницу добавить следующий код:
<script>
creatium.api(function (page) {
page.lazy('.accordeon', function (el) {
var accordeon = page.getComponent(el);
var spoilers = accordeon.getComponentsByClass('widget-spoiler');
spoilers.forEach(function (spoiler) {
spoiler.on('expand', function () {
spoilers.forEach(function (spoiler2) {
if (spoiler2 !== spoiler && !spoiler2.isCollapsed) {
spoiler2.collapse();
}
});
});
});
});
});
</script>
Можно сделать несколько секций или блоков со спойлерами, и каждому добавить класс accordeon. Тогда они будут работать независимо друг от друга. Код на страницу достаточно добавить только один раз.
Нескрываемый аккордеон
Так же есть другой вариант «аккордеона», в котором единственный открытый спойлер невозможно скрыть. То есть всегда будет один раскрытый спойлер.
<script>
creatium.api(function (page) {
page.lazy('.accordeon', function (el) {
var accordeon = page.getComponent(el);
var spoilers = accordeon.getComponentsByClass('widget-spoiler');
spoilers.forEach(function (spoiler) {
spoiler.on('expand', function () {
spoilers.forEach(function (spoiler2) {
if (spoiler2 !== spoiler && !spoiler2.isCollapsed) {
spoiler2.collapse();
}
});
});
spoiler.on('before-collapse', function (prevent) {
var hasExpanded = false;
spoilers.forEach(function (spoiler2) {
if (spoiler2 !== spoiler && !spoiler2.isCollapsed) {
hasExpanded = true;
}
});
if (!hasExpanded) prevent();
});
});
});
});
</script>