NLM061 • Время настройки: 1 минута
Показ и скрытие блоков по клику на Тильде
Модификация поможет настроить показ или скрытие блока при нажатии на кнопку и настроить эффект появления/скрытия.
Для корректной работы модификации включите поддержку jQuery. Подробнее. Как это сделать: Настройка сайта > Вставка кода > Подключить jQuery на страницах сайта.
Посмотрите, как будет выглядеть модификация на вашем сайте.
Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Йога
Свободно 32 места
10:00 —12:00
Свободно 5 мест
12:00 —14:00
Максим Петров
Пилатес
Саша Иванов
Растяжка
Свободно 8 мест
17:00 —19:00
Свободно 15 мест
10:00 —12:00
Ольга Сидорова
Кардио
Диана Каримова
Смотрите, как быстро установить модификацию
Инструкция
1. В генераторе указываешь:
2. Копируешь сгенерированный HTML код и вставляешь его в блок Т123;
- «id блоков»– Укажи id блока, который хочешь скрывать или показывать. Можно указать несколько через запятую и пробел (#rec00001, #rec00001)
- «Ссылка для показа/скрытия» – Пропиши название ссылки через # и после укажи ее в настройках элемента, который будет открывать/скрывать блок (текст, картинка, кнопка или шейп (например, hsblock);
- «Изначально» – Выбери условия, сразу показывать или скрывать блок;
- «Анимация скрытия/показа блока» – Выбери эффект появления/скрытия;
- «Убрать задержку перед скроллом» – Включи чекбокс, если хочешь обеспечить более плавный и быстрый переход при прокрутке страницы после скрытия/показа блока (работает только для обычной анимации);
- «id блока к которому будет скролл после открытия»
- «id блока к которому будет скролл после закрытия»;
2. Копируешь сгенерированный HTML код и вставляешь его в блок Т123;
- ВАЖНО: Если используется анимация «Слайдом» для нескольких блоков, то фоны скрываемых или появляющихся блоков должны быть одинаковыми, иначе будут видны разрывы между блоками в момент появления/скрытия.
Сгенерируйте код для своего сайта
Код готов и доступен по подписке Нолим
Уже есть подписка? Войти
Добавляйте на сайт слайдеры, аккордеоны, вкладки и скроллы — 200+ готовых решений в одной подписке
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Раскрывающийся блок на Тильде — управление контентом без лишней длины
Раскрывающийся блок на Тильде помогает спрятать второстепенный контент и показать его только по действию пользователя. Вместо длинной страницы с десятками абзацев можно оставить короткий экран, кнопку «Подробнее» и раскрывать нужный блок по клику.
Модификация NLM061 от Nolim подходит для ситуаций, где стандартного аккордеона мало: нужно показать не текст внутри карточки, а полноценный блок Tilda — с изображениями, кнопками, формой, расписанием, карточками или любым другим содержимым.
Модификация NLM061 от Nolim подходит для ситуаций, где стандартного аккордеона мало: нужно показать не текст внутри карточки, а полноценный блок Tilda — с изображениями, кнопками, формой, расписанием, карточками или любым другим содержимым.
Как установить за 5 минут
Сначала подготовь блок, который должен открываться или скрываться. Скопируй его ID и добавь в генератор на странице модификации. Затем задай ссылку-триггер: её нужно указать у кнопки, текста, картинки или шейпа, по которому пользователь будет нажимать.
В генераторе выбери начальное состояние блока: показывать сразу или скрыть до клика. После этого настрой анимацию появления, при необходимости добавь скролл к нужному блоку после открытия или закрытия. Готовый код вставь в T123 и опубликуй страницу.
В генераторе выбери начальное состояние блока: показывать сразу или скрыть до клика. После этого настрой анимацию появления, при необходимости добавь скролл к нужному блоку после открытия или закрытия. Готовый код вставь в T123 и опубликуй страницу.
Где использовать раскрывающиеся блоки
Такой сценарий удобен для страниц услуг, расписаний, тарифов, портфолио, FAQ, скрытых форм, подробных описаний, дополнительных условий и блоков «Посмотреть ещё». Пользователь видит только основную информацию, а детали открывает сам, если они ему нужны.
Например, на странице услуг можно показать короткие карточки направлений, а подробное описание, цены и форму заявки раскрывать по кнопке. Так страница остаётся легче визуально, но не теряет полезный контент для тех, кто хочет разобраться глубже.
Например, на странице услуг можно показать короткие карточки направлений, а подробное описание, цены и форму заявки раскрывать по кнопке. Так страница остаётся легче визуально, но не теряет полезный контент для тех, кто хочет разобраться глубже.
Чем это отличается от обычного аккордеона
Аккордеон обычно раскрывает текст внутри готового блока. NLM061 работает шире: по клику можно показать или скрыть целый блок Tilda. Внутри этого блока может быть не только текст, но и галерея, форма, карточки, кнопки, расписание или сложная сетка из Zero Block.
Это удобно, когда контент уже собран отдельным блоком и его не хочется переносить в стандартный аккордеон. Ты сохраняешь привычную структуру страницы, но управляешь видимостью блоков через одну кнопку.
Это удобно, когда контент уже собран отдельным блоком и его не хочется переносить в стандартный аккордеон. Ты сохраняешь привычную структуру страницы, но управляешь видимостью блоков через одну кнопку.
Что важно настроить аккуратно
Если одной кнопкой открывается несколько блоков, их ID нужно указывать через запятую. Так можно раскрывать целую группу: например, описание услуги, блок с примерами и форму заявки. Главное — заранее проверить порядок блоков на странице, чтобы после открытия контент выглядел логично.
Если используешь анимацию «слайдом» для нескольких блоков, лучше сделать фон скрываемых блоков одинаковым. Иначе в момент раскрытия могут появиться визуальные разрывы между секциями.
Если используешь анимацию «слайдом» для нескольких блоков, лучше сделать фон скрываемых блоков одинаковым. Иначе в момент раскрытия могут появиться визуальные разрывы между секциями.
Что проверить после публикации
После установки проверь оба состояния: блок скрыт до клика, блок появляется после клика, повторный клик работает корректно. Отдельно проверь мобильную версию: кнопка должна быть заметной, а раскрытый контент не должен уезжать слишком далеко вниз.
Если после открытия нужно сразу показать пользователю раскрытый контент, настрой скролл к нужному блоку. Это особенно полезно на длинных страницах, где кнопка находится выше, а скрытый блок появляется ниже по структуре.
Если после открытия нужно сразу показать пользователю раскрытый контент, настрой скролл к нужному блоку. Это особенно полезно на длинных страницах, где кнопка находится выше, а скрытый блок появляется ниже по структуре.
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
генераторе укажи ID кнопки-триггера и ID блока, который нужно показывать/скрывать. Задай эффект появления (fade, slide). Скопируй код и вставь в блок «HTML-код». Теперь по клику на кнопку блок будет появляться или скрываться.
Да. В генераторе Nolim можно указать несколько ID блоков через запятую — все они будут переключаться одной кнопкой одновременно. Это удобно для создания «разворачивающихся» секций с несколькими компонентами.
Да. Модификация использует стандартные CSS-переходы и JavaScript события click, которые корректно обрабатываются на всех мобильных браузерах. Тач-события приравниваются к click автоматически.
Было: страница услуг студии была 8000 px в высоту — пользователи скроллили и уставали.
Стало: каждую услугу свернули в кнопку через модификацию NLM061, подробное описание скрыто по умолчанию. Страница стала 2500 px, а раскрывающийся блок в Tilda даёт доступ к деталям тем, кто хочет их увидеть. Конверсия выросла на 15%.
Стало: каждую услугу свернули в кнопку через модификацию NLM061, подробное описание скрыто по умолчанию. Страница стала 2500 px, а раскрывающийся блок в Tilda даёт доступ к деталям тем, кто хочет их увидеть. Конверсия выросла на 15%.