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

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

Шаг 1: Добавление Zero Block и кнопки

  1. Войдите в редактор Tilda и откройте нужную страницу.
  2. Нажмите «Добавить блок» и выберите «Zero Block».
  3. В Zero Block добавьте элемент «Кнопка».
  4. Настройте внешний вид кнопки по вашему желанию (цвет, размер, текст).

Шаг 2: Добавление класса к кнопке

  1. Кликните правой кнопкой мыши по созданной кнопке.
  2. В появившемся меню выберите «Add CSS Class Name».
  3. В меню справа, появиться поле, введите в него класс toggle-button
  4. Нажмите «OK» для сохранения.

Шаг 3: Добавление блоков для скрытия

  1. Добавьте на страницу блоки, которые вы хотите скрывать/показывать.
  2. Скопируйте ID этих блоков.

Шаг 4: Добавление скрипта

  1. Добавьте на страницу блок T123 HTML-код.
  2. Вставьте следующий скрипт:

<script>
// ======= НАСТРОЙКИ СКРИПТА =======
// Добавьте ID блоков, которые нужно скрывать/показывать, в этот массив.
const blocksToToggle = ['#rec899634097'];

// Каждый ID должен быть в кавычках и начинаться с #, например: '#rec813283561'
// Разделяйте ID запятыми.
// Пример: ['#rec813283561', '#rec813296502', '#rec999999999']

// ======= ОСНОВНОЙ СКРИПТ =======
// Не изменяйте код ниже этой линии, если вы не уверены в своих действиях
document.addEventListener('DOMContentLoaded', function() {
    // Добавляем стили для кнопки
    const style = document.createElement('style');
    style.textContent = `
        .toggle-button {
            cursor: pointer; /* Указываем, что на кнопку можно нажать */
        }
    `;
    document.head.appendChild(style);
    
    // Находим кнопку с классом toggle-button
    const toggleButton = document.querySelector('.toggle-button');
    
    // Находим элемент с текстом кнопки
    const buttonText = toggleButton.querySelector('.tn-atom');
    
    // Сохраняем изначальный текст кнопки
    const originalText = buttonText.textContent;
    
    // Функция для скрытия блоков
    function hideBlocks() {
        blocksToToggle.forEach(id => {
            const elements = document.querySelectorAll(id);
            elements.forEach(el => {
                el.style.display = 'none'; // Полностью скрываем блок
            });
        });
    }
    
    // Функция для показа блоков
    function showBlocks() {
        blocksToToggle.forEach(id => {
            const elements = document.querySelectorAll(id);
            elements.forEach(el => {
                el.style.display = ''; // Возвращаем блок к исходному отображению
            });
        });
    }
    
    // Изначально скрываем все блоки
    hideBlocks();
    
    // Флаг для отслеживания состояния блоков
    let blocksVisible = false;
    
    // Добавляем обработчик клика на кнопку
    toggleButton.addEventListener('click', function() {
        if (blocksVisible) {
            hideBlocks();
            buttonText.textContent = originalText;
        } else {
            showBlocks();
            buttonText.textContent = 'Скрыть';
        }
        blocksVisible = !blocksVisible;
    });
});
</script>

Шаг 5: Настройка скрипта

  1. В начале скрипта найдите массив blocksToToggle.
  2. Замените существующие ID на ID ваших блоков, которые нужно скрывать/показывать.
  3. Убедитесь, что каждый ID начинается с символа # и заключен в кавычки.

Шаг 6: Проверка и публикация

  1. Сохраните изменения в блоке T123.
  2. Проверьте работу кнопки на странице.
  3. Если все работает корректно, вы молодец!

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

Понравилась запись? Оцените!
Оценок: 3 Среднее: 5
Telegram
WhatsApp
VK
Facebook
Email

Рекомендуем