Аккордеон

Иногда нужно, чтобы при раскрытии одного спойлера, другие спойлеры скрывались.

Для этого спойлеры нужно поместить в один родительский элемент, например в секцию или в блок.

Этому родительскому элементу нужно добавить класс 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>