Пошаговая инструкция
В этой инструкции мы рассмотрим, как добавить кнопку «Показать еще» в стандартный блок с ценами PL310, которая будет скрывать и показывать вторую колонку на мобильных устройствах.
- Добавьте на страницу стандартный блок PL310 «Цены и информация с горизонтальными линиями» из набора Тильда.
- Заполните обе колонки блока вашими ценами или услугами. Важно: скрипт будет работать только если заполнены обе колонки блока.
- Добавьте на страницу блок T123 «HTML-код» сразу после блока PL310.
- В настройках блока T123 вставьте следующий код:
<!--Скрываем вторую колонку с ценами на мобилках и добавляем кнопку "Показать еще"-->
<style>
/*Убираем отступ от первой колонки до кнопки*/
@media screen and (max-width: 960px) {
.t812__col:first-child {
margin-bottom: 0px !important;
}
}
</style>
<script>
// Дождёмся полной загрузки DOM
document.addEventListener('DOMContentLoaded', function() {
// Функция для проверки ширины экрана
function isMobile() {
return window.innerWidth < 768;
}
// Получаем основные элементы
const priceBlock = document.querySelector('.t812');
const columns = priceBlock.querySelectorAll('.t812__col.t-col.t-col_6');
const firstColumn = columns[0];
const secondColumn = columns[1];
// Добавляем CSS для анимации
const styleSheet = document.createElement('style');
styleSheet.textContent = `
.t812__col.t-col.t-col_6 {
transition: all 0.4s ease-in-out;
overflow: hidden;
}
.t812__col.t-col.t-col_6.hidden-mobile {
max-height: 0;
opacity: 0;
margin: 0;
padding: 0;
}
.price-toggle-btn {
transition: all 0.3s ease;
opacity: 0;
transform: translateY(20px);
}
.price-toggle-btn.visible {
opacity: 1;
transform: translateY(0);
}
.price-toggle-btn:hover {
background-color: #333333 !important;
}
.t812__price-list-wrapper {
display: flex;
flex-direction: column;
}
`;
document.head.appendChild(styleSheet);
// Создаём обёртку для второй колонки и кнопки
const wrapper = document.createElement('div');
wrapper.className = 't812__price-list-wrapper';
// Создаём кнопку "Показать ещё"
const toggleButton = document.createElement('button');
toggleButton.className = 'price-toggle-btn';
toggleButton.innerText = 'Показать еще';
toggleButton.style.cssText = `
display: none;
margin: 20px auto 0;
padding: 10px 30px;
background-color: #000000;
color: white;
border: none;
border-radius: 30px;
cursor: pointer;
font-family: 'Arial', sans-serif;
font-size: 14px;
width: 200px;
`;
// Перемещаем вторую колонку и добавляем кнопку в обёртку
secondColumn.parentNode.insertBefore(wrapper, secondColumn);
wrapper.appendChild(secondColumn);
wrapper.appendChild(toggleButton);
// Функция для обработки мобильного вида
function handleMobileView() {
if (isMobile()) {
secondColumn.classList.add('hidden-mobile');
toggleButton.style.display = 'block';
// Добавляем небольшую задержку для анимации появления кнопки
setTimeout(() => {
toggleButton.classList.add('visible');
}, 100);
} else {
secondColumn.classList.remove('hidden-mobile');
toggleButton.classList.remove('visible');
setTimeout(() => {
toggleButton.style.display = 'none';
}, 300);
}
}
// Обработчик клика по кнопке
toggleButton.addEventListener('click', function() {
const isHidden = secondColumn.classList.contains('hidden-mobile');
if (isHidden) {
secondColumn.classList.remove('hidden-mobile');
toggleButton.innerText = 'Скрыть';
} else {
secondColumn.classList.add('hidden-mobile');
toggleButton.innerText = 'Показать еще';
}
});
// Обработчик изменения размера окна с debounce
let resizeTimeout;
window.addEventListener('resize', function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(handleMobileView, 100);
});
// Инициализация при загрузке
handleMobileView();
});
</script>
Настройка внешнего вида и поведения скрипта
Чтобы изменить стиль кнопки и другие параметры, найдите в коде следующие места:
Стили кнопки (найдите toggleButton.style.cssText):
// Измените эти параметры для настройки внешнего вида кнопки
background-color: #000000; // Цвет фона
color: white; // Цвет текста
border-radius: 3px; // Скругление углов
width: 200px; // Ширина кнопки
font-size: 14px; // Размер шрифта
Анимация (найдите в CSS-блоке):
transition: all 0.4s ease-in-out; // Изменить скорость анимации (0.4s)
Точка перехода на мобильную версию (найдите функцию isMobile):
function isMobile() {
return window.innerWidth < 768; // Изменить 768 на нужную ширину
}
Текст кнопок:
toggleButton.innerText = 'Показать еще'; // Текст кнопки "показать"
toggleButton.innerText = 'Скрыть'; // Текст кнопки "скрыть"
Результат
- На мобильных устройствах (до 768px) вторая колонка будет скрыта
- Под первой колонкой появится кнопка "Показать еще"
- При нажатии на кнопку вторая колонка плавно раскроется
- На десктопе отображение останется без изменений
Теперь ваш прайс-лист будет адаптивным и удобным для просмотра на мобильных устройствах.
Понравилась запись? Оцените!
Оценок: 1 Среднее: 5
