#фишки геткурс
Как создать блок с разворачивающимся и сворачивающимся контентом по кнопке на странице в Геткурс.
Для этого всему одноколоночному блоку присваиваем класс "content-block".
Кнопке, которая будет разворачивать и сворачивать контент присваиваем класс "show-btn". А блокам (текст, фото, видео и др.), которые нужно скрыть под нашу кнопку класс "hide-content".
На страницу добавляем блок CSS и добавляем код, который скроет изначально наши блоки на странице:
.hide-content {
display: none;
}
На страницу добавляем блок JS и вставляем скрипт для плавного скрытия и открытия наших блоков:
$(document).ready(function() {
// Проходим по каждому блоку с классом .content-block
$(".content-block").each(function() {
// Находим контейнер кнопки
let moreContainer = $(this).find(".show-btn");
// Находим саму кнопку внутри контейнера (это важно для сохранения стилей)
let moreButton = moreContainer.find("button");
// Находим скрываемый контент
let hideContent = $(this).find(".hide-content");
// Если в вашей HTML-разметке текст по умолчанию не "Показать еще",
// вам может потребоваться установить его здесь:
// moreButton.text("Показать еще");
// Добавляем обработчик клика на контейнер кнопки
moreContainer.click(function() {
// Переключаем видимость скрываемого контента с помощью плавной анимации
hideContent.slideToggle(400);
// Проверяем, какой текст сейчас на кнопке, и меняем его
if (moreButton.text() === "Скрыть") {
moreButton.text("Показать еще");
} else {
moreButton.text("Скрыть");
}
});
});
});
Готово! У вас на странице блок с кнопкой, которая раскрывает и скрывает любой ваш контекст!
Видео как это работает смотреть на канале в Дзен тут
Нужна помощь с настройками Геткурс, сайтом, лендингом на мероприятие? У вас уставший вид Геткурс?
Пишите, помогу сделать обучение ваших учеников приятным и продуктивным! Интересные фишки, прогресс-бары, фильтры и многое другое отличит ваш курс от других!
Было полезно? Давайте дружить! Подписывайтесь на мой канал в Дзен и на Телеграм канал https://t.me/vashgc
#getcourse #геткурс #сайт #лендинг #оформление #личныйкабинет #фишки #польза #скрипт #код
