Work with legacy and simple sites using jQuery selectors, events, AJAX, effects, and plugins.
Lessons
Build an expand-collapse FAQ section.
FAQ Accordion is easiest to learn by reading the example, changing it, and observing the result.
// Accordion: open one panel at a time
$('.faq-q').on('click', function () {
const answer = $(this).next('.faq-a');
$('.faq-a').not(answer).slideUp();
answer.slideToggle();
});
// Tabs
$('.tab').on('click', function () {
$('.tab, .tab-panel').removeClass('active');
$(this).addClass('active');
$($(this).data('target')).addClass('active');
});Practice the FAQ Accordion example in a small scratch file, then explain what changed and why.