Accordion FAQ — Foundational Variant

What it does

• Click-to-expand rows — each row's title bar opens to reveal a long-form answer underneath, with a smooth height-grow animation
• One open at a time (default) — opening a new row gracefully closes the previously open one, keeping the page tidy
• Expand-collapse indicator — a chevron or plus/minus icon rotates as the row opens and closes, signaling state at a glance
• Smooth open/close animation — rows ease open and shut rather than snapping, so the interaction feels considered rather than abrupt
• Scannable list, deep on demand — visitors get a clean overview when collapsed, full answers when they tap

Best use cases

• Course landing pages — pricing FAQ, enrollment FAQ, refund policy
• Lesson reference content — definition glossaries, formula reference, term banks
• Coaching and consulting — frequently asked questions before booking
• Membership communities — rules, expectations, getting-started questions
• SaaS and product docs — feature reference and quick-answer help center

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

• Colors — slots for page background, row background, divider lines, title text, body text, and the indicator icon
• Fonts — two roles: a heading font for the row titles, and a body font for the expanded answers. Pick a pairing that matches your brand.
• Copy — each row has a short title (the question or concept name) and a long-form answer underneath. Add or remove rows as needed.
• Images — none by default; rows are typography-driven. Optional: small icons or images can sit inside the expanded answer area.
• Behavior — choose whether one row opens at a time or multiple can stay open simultaneously, and tune the open/close animation speed