URL скопирован в буфер обмена!

Как скрывать и показывать блок при клике на кнопку?

Показываем и скрываем блоки при клике на кнопку в Zero Block. Дополнительно можно включить якорь, настроить текст кнопки, а также скрывать саму кнопку или блок с кнопкой при клике. Скрипт работает со стандартными блоками и Zero Block

Модификация обновлена. Добавлена плавная анимация, скролл и поддержка autoscale. Исправлены ошибки в работе скрипта
Модификация работает с включенным Autoscale в блоках
Модификация работает с Zero Block и стандартными блоками
Номер модификации в библиотеке TiCode

Генератор кода

Ссылка для кнопки
id блока который скрываем
Скролить до открытого блока
Скрыть кнопку при клике
Скрыть блок с кнопкой при клике
Блок изначально скрыт
Текст кнопки вначале
Текст при клике на кнопку
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD039--><script> document.addEventListener("DOMContentLoaded", function () { const TiCodeButtonShow = ['#ti-show', '#rec584999865']; const TiCodeBlockVisible = false; const TiCodeHideButton = false; const TCshowButtons = document.querySelectorAll(`[href="${TiCodeButtonShow[0]}"]`); const TCshowBlocks = TiCodeButtonShow[1].replace(/#/g, '').split(',').map(id => document.getElementById(id)); TCshowBlocks.forEach(block => { block.style.transition = "max-height 0.5s ease-in-out, opacity 0.5s ease-in-out"; if (!TiCodeBlockVisible) { block.style.maxHeight = "0px"; block.style.opacity = "1"; block.style.overflow = "hidden"; block.classList.add("TiCodeBlockHide"); } else { block.style.maxHeight = "10000px"; block.style.opacity = "1"; block.style.overflow = "visible"; block.classList.add("TiCodeBlockShow"); } }); function toggleShowMore() { this.classList.toggle('TiCodeClick'); if (TiCodeHideButton) { this.classList.toggle('TiCodeBlockHide'); } TCshowBlocks.forEach(block => { if (!block.classList.contains('TiCodeBlockShow')) { block.style.transition = "max-height 0.5s ease-in-out, opacity 0.5s ease-in-out"; block.style.maxHeight = '0px'; block.style.opacity = "1"; block.style.overflow = "hidden"; } }); const targetBlock = TCshowBlocks[0]; TCshowBlocks.forEach(block => { if (block.classList.contains("TiCodeBlockHide")) { block.style.maxHeight = block.scrollHeight + 'px'; block.style.opacity = "1"; block.style.overflow = "visible"; block.classList.remove("TiCodeBlockHide"); block.classList.add("TiCodeBlockShow"); targetBlock.scrollIntoView({ behavior: 'smooth' }); } else { block.style.maxHeight = '0px'; block.style.opacity = "1"; block.style.overflow = "hidden"; block.classList.remove("TiCodeBlockShow"); block.classList.add("TiCodeBlockHide"); } }); const buttonText = this.classList.contains('TiCodeClick') ? 'Скрыть' : 'Показать'; this.textContent = buttonText; } TCshowButtons.forEach(button => { button.addEventListener('click', toggleShowMore); }); }); </script> <style> .TiCodeBlockHide { max-height: 0; opacity: 1; pointer-events: none; } .TiCodeBlockShow { max-height: 10000px; opacity: 1; pointer-events: initial; } </style>
КОПИРОВАТЬ КОД
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем Zero Block с кнопкой и задаем ей ссылку #ti-show

2. Указываем в генераторе кода id блока который будем скрывать. Можно указать несколько id через запятую. Например: #rec584999865,#rec584999866,#rec584999865 и. д.

3. Указываем дополнительные настройки в генераторе:
Скролл до открытого блока - включаем если хотим чтобы при клике скролило до открытого блока. Чтобы скролл был плавный добавляем на страницу блок Т178(плавный скролл);
Скрыть кнопку при клике - включаем если хотим чтобы при клике на кнопку показывался наш блок, а кнопка скрывалась;
Скрыть блок при клике - включаем если хотим чтобы при клике скрывался весь блок с кнопкой;
Блок изначально скрыт - если поставить значение "нет", то изначально блок будет видно и при клике на кнопку будет скрываться;
Текст кнопки вначале - указываем текст который будет отображаться на кнопке до клика. Важно! Когда создали кнопку в блоке, то в настройках кнопки указываем такой же текст;
Текст при клике на кнопку - указываем текст который будет показываться после клика на кнопку;

4. Копируем готовый код и вставляем в HTML блок Т123.

Примечание! При создании кнопки в Zero Block не забываем указать в настройках кнопки такой же текст как и в поле "Текст кнопки вначале".

Топ 10 книг для дизайнеров

01
Дизайн привычных вещей
Дон Норман
02
Основы стиля в типографике
Роберт Брингхерст
03
Искусство цвета
Иоханнес Иттен
04
Искусство формы
Иоханнес Иттен
05
Новая типографика
Ян Чихольд
06
Пиши, сокращай
Максим Ильяхов
07
Дизайн для реального мира
Виктор Папанек
08
Этой кнопке нужен текст
Кирилл Егерев
09
Не заставляйте меня думать
Стив Круг
10
О шрифте
Эрик Шпикерманн
Made on
Tilda