1. Создаем первый Zero Block в котором размещаем кнопку(вместо кнопки можно использовать текст, шейп, картинку) и назначаем класс
ti-accordЧтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем классЕсли нужна иконка которая будет поворачиваться при открытой гармошке, то создаем элемент(картинку или шейп) и назначаем класс
ti-icon2. Создаем второй Zero Block и размещаем контент, который будет показываться при клике на кнопку. Zero Block назначаем класс
uc-ti-content Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name" 3. Дублируем наши два блока столько раз сколько гармошек нам нужно.
4. Переходим в генератор кода и указываем дополнительные настройки:
Номер открытой вкладки при загрузке - указываем вкладку которая будет открыта сразу при загрузке
страницы. Счет начинается с 0. Поэтому чтобы была открытая первая вкладка нужно указать 0, чтобы вторая указываем 1 и т. д. Если не нужно открывать вкладку, то указываем -1Скролл до открытой вкладки - при включённой опции будет скролить до открытой вкладки. Чтобы скролл был плавный, добавляем на страницу блок Т178.
Открывать только по одной вкладке - при включённой опции, одновременно может быть открыта только одна вкладка. При открывании новой вкладки, старая автоматически закрывается.
Градус поворота иконки - указываем градус поворота иконки. Будет работать только если добавили иконку и присвоили ей класс ti-icon.
5. Копируем готовый код и вставляем в HTML блок Т123.
Примечание: если вам нужно создать две независимых гармошки в рамках одной страницы, то генерируем два кода с уникальными классами кнопок.
Одна кнопка может открывать больше одного блока. Достаточно после блока с кнопкой создать два или больше Zero Block с классом uc-ti-content
В гармошку можно добавлять стандартные блоки, но в настройках блока нужно убирать отступ сверху и отступ снизу.
Смотреть скринСкрипт не работает с включенным Автоскейлом!