Как сделать кнопку «Показать еще» в Tilda Zero Block

В этой статье мы рассмотрим, как создать кнопку «Показать еще» в Tilda Zero Block для скрытия и отображения дополнительного контента на странице. Это полезная функция для упорядочивания информации и улучшения юзабилити сайта.

Подготовка

1. Добавьте на страницу блоки, которые нужно скрыть изначально.
2. Создайте новый Zero Block и разместите в нем кнопку.
3. Добавьте кнопке ссылку #my-button.
4. Поместите блок с кнопкой ниже блоков, которые нужно скрыть.

Добавление кода

1. Добавьте блок «Код» (Т123) на страницу.
2. Вставьте следующий код в блок, заменив rec742184202 и rec742199284 на ID своих блоков, которые нужно скрыть:

<style>
/*   ID блоков котрые нужно скрыть */
  #rec742184202, #rec742199284 {
      display: none;
  }  
</style>
<script>
$(document).ready(function() {
  // Массив ID блоков которые скрываем/показываем
  const blockIds = ['rec742184202', 'rec742199284'];

  // Обработчик события click для кнопки
  $('a[href="#my-button"]').click(function(e) {
    e.preventDefault();

    const $button = $(this);
    const isVisible = $button.text() === 'Показать';

    blockIds.forEach(id => {
      const $block = $(`#${id}`);
      isVisible ? $block.show(400) : $block.hide(400);
    });

    $button.text(isVisible ? 'Скрыть' : 'Показать');
  });
});
</script>

3. Если нужно добавить больше блоков для скрытия, добавляйте их ID через запятую и пробел в массиве blockIds и в стили CSS.

Как это работает

• Изначально блоки, указанные в CSS, скрыты с помощью display: none;.
• При клике на кнопку с ссылкой #my-button срабатывает обработчик события.
• Скрипт проверяет текст на кнопке («Показать» или «Скрыть»).
• Для каждого ID блока в массиве blockIds выполняется показ или скрытие блока с анимацией длительностью 400 мс.
• Текст на кнопке меняется в зависимости от того, были блоки показаны или скрыты.

Таким образом, вы можете управлять видимостью блоков на странице с помощью кнопки «Показать еще» в Tilda Zero Block.