# Searchable FAQ

> A complete help section with searchable answers, topic filters, native disclosures and a clear route to a real person. Built around a warm editorial workspace example.

Canonical: https://gsapvault.com/sections/searchable-faq-section
Live demo: https://gsapvault.com/demos/searchable-faq-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | click-toggle, state-transition, progressive-enhancement, interruptible-transitions, keyboard-navigation, container-queries, responsive-section |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

Searchable FAQ Section gives visitors two useful ways into a set of answers: search for a specific concern, or narrow the list to a relevant topic. The fictional Parcel shared workspace example covers joining, the working day and membership, with nine concise questions written around practical booking decisions. A separate contact panel makes the route to human help visible alongside the answers.

Warm cream, oxblood serif type and a broad ruled question list give the section an editorial identity without introducing decorative media. At desktop width, the introduction and contact sit beside the answer finder. On smaller containers, the search and topic controls sit immediately above the answers, with contact following the list.

Native disclosures keep every answer reachable without scripts. With enhancement, local search includes both questions and answers, topic controls and counts come from the actual markup, and disclosure height transitions respond to repeated or reversed input. The section owns only its own controls and animations, supports live reduced-motion changes and can be mounted independently more than once.

## Features

- Nine semantic questions across joining, workday and membership topics
- Local search across both question and answer copy with combined topic filtering
- Topic controls and counts derived from the authored details elements
- Scope-aware polite result announcements, empty state and one-click reset
- Native details and summary fallback with every answer reachable without JavaScript
- Interruptible disclosure height transitions that settle on the latest input
- Distinct support panel with a clearly identified sample email destination
- Root-scoped brand variables, named container queries and independent instances
- Instant reduced-motion responses including preference changes while mounted
- Documented teardown and remount for integration into larger pages

## Use Cases

- Shared workspaces answering pre-booking and membership questions
- Fitness studios explaining trials, facilities and recurring membership
- Subscription products grouping onboarding and billing support
- Venues answering access, arrival and booking questions

## Vibe-Code Ready Setup

This website section includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

Every question and answer is authored once in semantic details markup. The initial HTML works as native disclosures, so all content remains available without JavaScript or when GSAP cannot load. Search tools appear only after the section has initialised successfully.

The enhanced section derives its topic buttons from each question’s data-topic value and searches visible question and answer text locally. Search terms and the selected topic combine, and the result line names that scope. Empty results offer a reset beside the persistent contact route. No backend or duplicated content array is required.

Opening or closing a question animates only its answer height. Repeated input interrupts that transition at its current height and settles at the latest requested state; natural height is restored afterward. Reduced motion switches disclosures instantly. Each root has independent state and a destroy method that restores the native reading experience without touching the host page’s scrolling or animation.

## Documentation

How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### 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](https://gsap.com/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.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This website section is included only in the Vault, for existing and new owners. It is not sold individually. The standard licence covers unlimited personal and commercial projects; bundled assets retain their own licence requirements.

- [Get the Vault](https://gsapvault.com/pricing)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt