JavaScript для верстальщика. Урок 08. Создание аккордеона
Аккордеон это блок из контента и заголовков. Контент скрыт и появляется только по клику по соответствующему заголовку.
Разметка - несколько блоков вида:
<div class="faq-item">
<a href="#" class="faq-title">Заголовок</a>
<div class="faq-content"><p>Текст</p></div>
</div>
Текст по умолчанию скрыт. Для этого в css прописываем
.faq-content {
display: none;
}
Блокам faq-title и faq-content добавляем классы js-faq-title и js-faq-content
Пишем функцию для отлавливания кликов по блокам с классом js-faq-title:
$ (".js-faq-title").on("click", function(){
})
Отменяем событие по умолчанию
event.preventDefault();
Пробуем использовать функцию fadeIn()
$(".js-faq-content").fadeIn();
Теперь при клике по любому заголовку открывается контент всех блоков. Это не совсем то, что требуется.
Так как в разметке контент находится непосредственно после блоков с заголовками, используем функцию next()
$ (".js-faq-title").on("click", function(){
$(this).next().fadeIn();
})
Эта конструкция говорит следующее: "При клике по этому (this) блоку открой следующий за ним блок".
Почти хорошо.
Заменим .fadeIn() функцией slideDown(). Контент будет не просто появляться, а плавно выплывать вниз из-под заголовка.
У slideDown()есть возможность в скобках указать время эффекта в миллисекундах, или словами "fast" или "slow", или оставить время по умолчанию.
Противоположная slideDown()функция - slideUp()выполняет противоположное действие и скрывает контент. И есть ещё slideToggle()- переключатель. По первому клику контент открывается, по второму скрывается. И этот вариант самый оптимальный.
$ (".js-faq-title").on("click", function(){
$(this).next().slideToggle();
})
Можно так и оставить.
Можно сделать так, чтобы при нажатии на любой следующий заголовок предыдущий открытый контент скрывался.
$(".js-faq-title").on("click", function(e) {
e.preventDefault();
$(".js-faq-content").slideUp();
$(this).next().slideToggle();
});
Так как код выполняется последовательно, при клике по заголовку сначала все блоки с контентом закроются, а потом откроется только тот, который лежит следующим после заголовка.
P.S. автор ещё семь минут рассказывает о присвоении активной вкладке класса active проверке есть ли у вкладки этот класс или нет и т.д. Но в итоге весь его код сводится к тому, что выше. Кому интересны сложные пути, смотрим видео с 07:00
UPD. про то, зачем нужны сложности с классом active, идёт речь в следующей теме
Разметка - несколько блоков вида:
<div class="faq-item">
<a href="#" class="faq-title">Заголовок</a>
<div class="faq-content"><p>Текст</p></div>
</div>
Текст по умолчанию скрыт. Для этого в css прописываем
.faq-content {
display: none;
}
Блокам faq-title и faq-content добавляем классы js-faq-title и js-faq-content
Пишем функцию для отлавливания кликов по блокам с классом js-faq-title:
$ (".js-faq-title").on("click", function(){
})
Отменяем событие по умолчанию
event.preventDefault();
Пробуем использовать функцию fadeIn()
$(".js-faq-content").fadeIn();
Теперь при клике по любому заголовку открывается контент всех блоков. Это не совсем то, что требуется.
Так как в разметке контент находится непосредственно после блоков с заголовками, используем функцию next()
$ (".js-faq-title").on("click", function(){
$(this).next().fadeIn();
})
Эта конструкция говорит следующее: "При клике по этому (this) блоку открой следующий за ним блок".
Почти хорошо.
Заменим .fadeIn() функцией slideDown(). Контент будет не просто появляться, а плавно выплывать вниз из-под заголовка.
У slideDown()есть возможность в скобках указать время эффекта в миллисекундах, или словами "fast" или "slow", или оставить время по умолчанию.
Противоположная slideDown()функция - slideUp()выполняет противоположное действие и скрывает контент. И есть ещё slideToggle()- переключатель. По первому клику контент открывается, по второму скрывается. И этот вариант самый оптимальный.
$ (".js-faq-title").on("click", function(){
$(this).next().slideToggle();
})
Можно так и оставить.
Можно сделать так, чтобы при нажатии на любой следующий заголовок предыдущий открытый контент скрывался.
$(".js-faq-title").on("click", function(e) {
e.preventDefault();
$(".js-faq-content").slideUp();
$(this).next().slideToggle();
});
Так как код выполняется последовательно, при клике по заголовку сначала все блоки с контентом закроются, а потом откроется только тот, который лежит следующим после заголовка.
P.S. автор ещё семь минут рассказывает о присвоении активной вкладке класса active проверке есть ли у вкладки этот класс или нет и т.д. Но в итоге весь его код сводится к тому, что выше. Кому интересны сложные пути, смотрим видео с 07:00
UPD. про то, зачем нужны сложности с классом active, идёт речь в следующей теме