Добавить в корзинуПозвонить
Найти в Дзене
lf-code

Как выполнить показ скрытых блоков нажатием на кнопку в Тильде

Tilda Publishing — это платформа для создания сайтов, которая позволяет создавать проекты различной сложности без необходимости знаний в программировании. Тем не менее, для реализации некоторых функций все же требуется использование небольших скриптов. Одной из таких функций является возможность скрыть блок и восстановить его отображение при нажатии на кнопку. Скрытые блоки в Tilda Publishing дают возможность скрывать часть контента на странице и показывать его по мере необходимости. Это особенно полезно, например, при создании аккордеона, где содержимое блока раскрывается только при клике на заголовок. Такая функция также может быть удобной для создания меню или других интерактивных элементов на сайте. Получить код модификации Больше информации в нашем ТГ канале
Оглавление

Tilda Publishing — это платформа для создания сайтов, которая позволяет создавать проекты различной сложности без необходимости знаний в программировании. Тем не менее, для реализации некоторых функций все же требуется использование небольших скриптов. Одной из таких функций является возможность скрыть блок и восстановить его отображение при нажатии на кнопку.

Что такое скрытые блоки в Tilda Publishing?

Скрытые блоки в Tilda Publishing дают возможность скрывать часть контента на странице и показывать его по мере необходимости. Это особенно полезно, например, при создании аккордеона, где содержимое блока раскрывается только при клике на заголовок. Такая функция также может быть удобной для создания меню или других интерактивных элементов на сайте.

Как реализовать показ скрытых блоков в Tilda Publishing при нажатии на кнопку

  1. Создайте зеро блок
  2. В зеро блоке нажмите на + и выберите Add Button, чтобы добавить кнопку
  3. Нажмите правой кнопкой мыши на добавленную кнопку и выберите Add CSS Class Name
  4. В появившемся поле пропишите класс showblock
  5. Пропишите текст кнопки, например Показать (такой же текст нужно прописать в коде). Эта кнопка будет показывать скрытый блок. После показа блока текст в кнопке изменится на Скрыть (Этот текст можно изменить в коде)
  6. Сохраните изменения и закройте зеро блок
  7. Сразу после этого зеро блока создайте другой блок, который вы хотите скрыть. Подойдет как зеро блок, так и любой стандартный
  8. Нажмите правой кнопкой мыши внутри блока и выберите пункт CSS Class
  9. В появившемся поле введите класс hidden-block
  10. Вы можете скрывать и показывать неограниченное количество блоков. Перед каждым скрытым блоком нужно создать свой зеро блок с кнопкой. Для каждой пары блоков (блок с кнопкой и скрытый блок) используйте те же классы, что и для первой пары (showblock для кнопки и hidden-block для скрытого блока)
  11. После создания нужного вам количества кнопок и блоков в конце страницы создайте html блок т123, в Контент скопируйте код модификации и опубликуйте страницу
  12. Готово!

Получить код модификации

Больше информации в нашем ТГ канале