Шаг 1: Добавление Zero Block и кнопки
- Войдите в редактор Tilda и откройте нужную страницу.
- Нажмите «Добавить блок» и выберите «Zero Block».
- В Zero Block добавьте элемент «Кнопка».
- Настройте внешний вид кнопки по вашему желанию (цвет, размер, текст).
Шаг 2: Добавление класса к кнопке
- Кликните правой кнопкой мыши по созданной кнопке.
- В появившемся меню выберите «Add CSS Class Name».
- В меню справа, появиться поле, введите в него класс
toggle-button
- Нажмите «OK» для сохранения.
Шаг 3: Добавление блоков для скрытия
- Добавьте на страницу блоки, которые вы хотите скрывать/показывать.
- Скопируйте ID этих блоков.
Шаг 4: Добавление скрипта
- Добавьте на страницу блок T123 HTML-код.
- Вставьте следующий скрипт:
<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: Настройка скрипта
- В начале скрипта найдите массив
blocksToToggle
. - Замените существующие ID на ID ваших блоков, которые нужно скрывать/показывать.
- Убедитесь, что каждый ID начинается с символа
#
и заключен в кавычки.
Шаг 6: Проверка и публикация
- Сохраните изменения в блоке T123.
- Проверьте работу кнопки на странице.
- Если все работает корректно, вы молодец!
Теперь у вас есть функциональная кнопка «Показать еще», которая скрывает и показывает выбранные блоки на вашей странице Tilda. При первом нажатии на кнопку скрытые блоки появятся, а текст кнопки изменится на «Скрыть». При повторном нажатии блоки снова скроются, а текст кнопки вернется к исходному.
Понравилась запись? Оцените!
Оценок: 3 Среднее: 5