Создание аккордеона (спойлера) на сайте

Вы часто видели на сайте спойлер. В него удобно спрятать часто задаваемые вопросы или дополнительный SEO текст.

Сейчас расскажу как это сделать! В процесс работы будем использовать только стандартные средства конструктора. Ограничений по тарифам ни каких нет. Сделать можно на любом.

Далее вставляем новую секцию на сайти прописываем в настройках:

#blk-624e {min-height: auto !important;}

Обратите внимание на идентификатор блока, он должен совпадать в вашим. Сейчас в примере указан "#blk-624e" заменяете его на свой.

Первый шаг позади, идем дальше. В данную секцию вставляем Колонку и Блок. В настройках блока необходимо установить галочку Аккордеон, как показано на рисунке. Данная галочка находится на вкладке "Дополнительно"

Именно в данном блоке мы и будем делать наш спойлер.

При создании блока, в нем уже есть 1 колонка. Переносим в нее из панели инструментов элемент Меню. И Прописывай свой вопрос.

Стрелки на скрине показывают порядок действия.

Пока нас интересует только это, остальные настройки мы пропишем позже. На вкладках "Вид | Наведение | Активый" задаются стили нашего меню. Как будет вести себя ссылка при наведении.

В эту же колонку, сразу после Меню вставляем новый блок и размещам ту информацию, которая будет отображать при клике на данную ссылку.

В блок можно добавить: текст, слайдер, фотографии или разместить прайс лист.

На третьем этапе мы соедем эти два элемента.

Для только, чтобы при клике на ссылку блок разворачивался, необходимо указать его идентификатор. Найти его можно по скрину ниже. Выделяем Блок и переходим на вкладку Дополнительно. Жмем кнопку [Назначить]. Запоминаем Идентификатор блока.

Возвращаемся в настройки ссылки. И Делаем как показано на картинке ниже. Но только выбираем свой идентификатор блока, который вы только, что назначили.

Вы можете выбрать состояние блока, например Скрыт или виден! Это решение идеально подойдет в том случае есть у вас много вопросов и нужно привлечь внимание посетителя сайта, раскрыв первый вопрос.

Как накопировать много вопросов?

Обратите внимание:

Нужно связывать Ссылку и Блок каждый раз при создании.

У меня не сворачивается вопрос при клике на следующий?

Вы не установили галочку Аккордеон в первом Блоке, который мы размещали в самом начале.

Если у вас остались вопросы по данному элементу, напишите нам!