Аккордеон из zero-блоков на Tilda

Эта модификация позволяет сделать аккордеон из зеро-блоков с использованием готового кода.

Вы самостоятельно создаёте структуру в Zero — заголовки и блоки с контентом, а скрипт отвечает за корректную работу открытия и закрытия вкладок.

⠀

Пример

Пример применения блока

⠀

Инструкция

❗️ ВАЖНО:

Чтобы код работал на вашем сайте проверьте, что у вас включен jQuery в настройках сайта.

Настройки сайта ⟶ Вкладка Вставка кода ⟶ Ставим галочку у «Подключить jQuery на страницах сайта»

⠀

1️⃣  КАРТОЧКА ОТКРЫТИЯ АККОРДЕОНА

• Создаем zero-блок — это будет первая карточка аккордеона
• Добавляем заголовок
• Добавляем элемент — стрелку, задаем класс   .uc-accord-arrow
• Поверх всего контента добавляем кнопку и делаем ей прозрачность 0%, задаем класс .uc-accord-open
• Всей карточке zero задаем класс .uc-accord-card-1

⠀

2️⃣  КАРТОЧКА КОНТЕНТА

• Ниже добавляем новый zero-блок и наполняем его всем необходимым контентом.
• Задаем всему блоку контента класс (такой же как класс у заголовка выше), к которому он относится — .uc-accord-card-1

⠀

3️⃣  ДРУГИЕ КАРТОЧКИ

Ниже дублируем зеро-блоки заголовка и контента к нему нужное кол-во раз. Меняем у них контент и задаем соответствующие классы:

• 2 карточка заголовка и ее контент — .uc-accord-card-2
• 3 карточка заголовка и ее контент — .uc-accord-card-3
• и т.д.

❗️ ВАЖНО:

Контентные блоки идут под соответствующими им карточками для их открытия.

⠀

4️⃣  НИЖЕ ВСТАВЛЯЕМ КОД

В коде вы можете отредактировать настройки отображения аккордеона (в коде есть примечания, где это сделать):

• Текст первой карточки открыт сразу: true (да) / false (нет)
• Отображать только одну раскрытую карточку или все, которые были открыты: true (все) / false (одна)

⠀

Код для вставки

<script>

// Текст первой карточки открыт сразу

const ucOpenFirstOnLoad = false; // true=да / false=нет

// Отображать только одну раскрытую карточку

const ucAllowMultipleOpen = true; // false = одна открыта, true = все, которые открыли

$(document).ready(function () {

$('[class*="uc-accord-card-"]').each(function () {

const $block = $(this);

if ($block.find('.uc-accord-open').length === 0) {

$block.hide().removeClass('active-accord');

}

});

function getContentBlock($headerCard) {

const classList = $headerCard.attr('class').split(/\s+/);

const cardClass = classList.find(function (cls) {

return cls.indexOf('uc-accord-card-') === 0;

});

if (!cardClass) return $();

const $sameClassBlocks = $('.' + cardClass);

const $contentBlock = $sameClassBlocks.filter(function () {

return $(this).find('.uc-accord-open').length === 0;

});

return $contentBlock;

}

if (ucOpenFirstOnLoad) {

const $firstTrigger = $('.uc-accord-open').first();

if ($firstTrigger.length) {

const $firstHeaderCard = $firstTrigger.closest('[class*="uc-accord-card-"]');

const $firstContent = getContentBlock($firstHeaderCard);

if ($firstContent.length) {

$firstContent.addClass('active-accord').show(); // без анимации

$firstHeaderCard.find('.uc-accord-arrow').addClass('rotated');

}

}

}

$('.uc-accord-open').on('click', function (e) {

e.preventDefault();

const $clicked = $(this);

const $headerCard = $clicked.closest('[class*="uc-accord-card-"]');

if (!$headerCard.length) return;

const $contentBlock = getContentBlock($headerCard);

if (!$contentBlock.length) return;

const isOpen = $contentBlock.hasClass('active-accord');

if (ucAllowMultipleOpen) {

if (isOpen) {

// закрываем только свою

$contentBlock.removeClass('active-accord').slideUp(300);

$headerCard.find('.uc-accord-arrow').removeClass('rotated');

} else {

// открываем только свою

$contentBlock.addClass('active-accord').slideDown(300);

$headerCard.find('.uc-accord-arrow').addClass('rotated');

}

return;

}

if (isOpen) {

$contentBlock.removeClass('active-accord').slideUp(300);

$headerCard.find('.uc-accord-arrow').removeClass('rotated');

} else {

$('[class*="uc-accord-card-"]').each(function () {

const $block = $(this);

if ($block.find('.uc-accord-open').length === 0) {

$block.removeClass('active-accord').slideUp(300);

}

});

$('.uc-accord-arrow').removeClass('rotated');

$contentBlock.addClass('active-accord').slideDown(300);

$headerCard.find('.uc-accord-arrow').addClass('rotated');

}

});

});

</script>

<style>

.uc-accord-arrow {

transition: transform 0.3s ease;

}

.uc-accord-arrow.rotated {

transform: rotate(90deg);

}

.uc-accord-open {

cursor: pointer;

}

</style>

⠀

Смотреть модификацию на сайте:

Больше модификаций для Tilda: