Made on
Tilda
Одна карточка раскрывается.
Остальные уступают ей место.
Ваш контент остаётся в Tilda.
Параметры выбранного блока применяются к примеру ниже.
Текущие параметры применятся ко всем поддерживаемым блокам с классом uc-aw-expand-cards. В коде тот же движок, что и в предпросмотре. Выбор «До», тестовое количество и ширина предпросмотра в код не входят.
Используйте TE100, TE200 или TE605. Тексты, фото, ссылки и количество карточек редактируйте в штатном «Контенте». Выключите autoscale у блока.
Настройки блока → CSS Class Name. Введите aw-expand-cards, если префикс uc- уже показан. Итоговый класс блока должен быть uc-aw-expand-cards.
Добавьте один T123 в самом низу, после всех карточек. Вставьте скопированный код целиком и опубликуйте страницу. Один скрипт обслужит все отмеченные блоки.
Активная карточка расширяется относительно соседних. На узком контейнере и touch-устройствах все карточки идут вертикально: для доступа к контенту не требуется hover. При настройке «Уменьшение движения» переходы выключены.
Модификация работает с этими нативными структурами. Не предназначена для магазина, CMS / Потоков, слайдеров и Zero Block. Autoscale должен быть выключен.
Не меняйте служебные классы t…, data-атрибуты и структуру карточек. Проверьте длинные тексты, ссылки, клавиатуру и мобильный экран после публикации. Для двух блоков достаточно повторить класс, без копирования скрипта.
Ниже — три нативных блока из редактора. Настройки меняют только выбранный пример; остальные сохраняют свои параметры. Переключатели «До / После», «Мобильный» и количество карточек относятся только к предпросмотру. Ссылки в предпросмотре отключены, а в живых блоках работают как обычно.