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.
In accordance with Section 6 & Section 7 of the DPDP Act 2023, third-party analytics and marketing trackers are strictly gated behind your affirmative consent. You may withdraw consent at any time under Section 6(4).
Essential for session authentication (ci_session), Cross-Site Request Forgery security (csrf_cookie_name), and Cloudflare DDoS/bot prevention. Cannot be disabled.
Gated under DPDP Section 7. Allows Google Analytics 4 (Google Consent Mode v2) to measure aggregate, anonymized tool usage.
Enables browser local storage to preserve your theme selection (dark/light mode) and code editor layout between visits.
Used to display developer sponsorships and native tool partner notices.