Searchable FAQ

Quick start

1. Keep assets/style.css and assets/script.js together with your page.
2. Copy the complete <section class="parcel-faq" data-searchable-faq …> from index.html into your page. The surrounding main, preview body style and document metadata are demo context.
3. Load the CSS, GSAP core and section script in that order:

Code snippet omitted: it ships with the download.

No build step, extra GSAP plugin or scroll library is needed. Every answer remains available through native disclosures if either script fails.

Make it yours

Edit the heading, introduction, each question’s summary, and the paragraph HTML inside [data-faq-answer]. Change the section’s accessible label to your organisation. The h2 suits a section inside an existing page; you can change its tag while retaining its class.

Replace the mailto:hello@parcel.example link with your real support email or help page, and replace the sample contact/policy note. The .example address demonstrates a destination; it does not send to a real support service. There is no form or backend included.

The design intentionally has no content images. Its content is readable answers, so there are no image files, crop dependencies or asset-generation steps.

For a fitness studio, change the introductory copy, use data-topic="Getting started", data-topic="Your visit" and data-topic="Membership", and replace the workspace policies with your actual trial, facilities and billing information.

Add, remove or reorder questions

Each repeated item is a complete details[data-faq-item] with a data-topic label, a summary and a [data-faq-answer] wrapper. Duplicate that markup to add an answer, or remove/reorder it. The script derives topics and counts from these elements in document order; no JavaScript content array needs updating. Leave open on any answer that should initially be visible.

There is no hard-coded item limit. A single topic hides unnecessary category navigation. An empty list keeps a helpful message and contact route. After editing the DOM while mounted, call the instance’s destroy() before editing and then ParcelFAQ.mount(root).

Brand controls

The token block on .parcel-faq owns the ground, text, muted text, accent, rule and control colours; display/body font families; content width; gutter, vertical spacing and column gap; and corner radius. All styling stays within this root. Recheck contrast when changing colours: the supplied accent/ground and muted/ground combinations meet text contrast requirements, but arbitrary replacements may not.

Behaviour and options

data-faq-duration="0.28" controls disclosure duration in seconds, clamped from 0 to 1. Reduced motion always takes precedence. Search matches all space-separated words against both the question and answer, ignoring case and accents; the chosen topic narrows those results. The result count names the active scope. Reset clears both topic and search. Multiple answers can stay open for comparison.

The script automatically mounts every [data-searchable-faq] on DOM readiness. For client-side routing:

Code snippet omitted: it ships with the download.

Each root also exposes its current instance as root.parcelFaq. Destroy restores authored open states, removes generated category controls and IDs, and reveals the unfiltered reading order. Call it before removing a mounted root. No global animation, navigation or scrolling is changed.

Accessibility and integration

Native summary controls support keyboard and touch; open state is exposed to assistive technology. Search has a visible label. Topic buttons expose their pressed state, and a polite status announces result counts. Visible focus, a recovery action for zero results, reduced motion and dependency-free disclosure fallbacks are included.

The layout responds to the section’s container, so it can sit in a narrow host column. It has no sticky or fixed-height requirements. Questions deliberately continue in normal document flow; expanding answers and filtering results change the section’s natural height. The contact panel follows the answers on narrow screens. Preserve the outer root, the structural classes and data-faq-* hooks when redesigning.

Dependencies and credits

• GSAP core 3.15.0; no plugins used. See GSAP licensing.
• System Arial/Helvetica and Georgia/Times New Roman stacks; no bundled or remote font assets.
• No photography, third-party artwork or external content assets. Parcel, its policies and contact details are fictional sample content.
• Section files are supplied under your GSAP Vault licence.