🔒 Premium Lesson Interactive

Accordion FAQ — Course Foundations Variant

Stacked accordion rows tuned for course-content reference, where each row opens to a longer teaching answer — pilots a foundations-of-design course index but the pattern fits any course glossary, key-concept index, or curriculum FAQ.

Best for: Course glossaries, key-concept indexes, and curriculum-level FAQs where every row holds a teaching answer rather than a quick fact.

Live preview — scroll inside the frame to see the full page.

What it does

  • Click-to-expand teaching rows — each row opens to a longer answer with room for examples and supporting copy
  • One open at a time (default) — opening a new row gracefully closes the previous to keep focus tight
  • Expand-collapse indicator — a chevron or plus/minus rotates to signal each row's state
  • Curriculum-style spacing — generous padding and clear hierarchy make it feel like reference material
  • Scannable index, deep on demand — closed state reads like a table of contents; open state reads like a lesson note

Best use cases

  • Course glossaries — key terms, named concepts, jargon-busters
  • Onboarding curriculums — week-by-week or module-by-module FAQ
  • Coaching programs — frequently asked questions about methodology and process
  • Membership reference libraries — anchor concepts students return to repeatedly
  • Certification prep — study guides organized as expandable concept rows

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 line, title text, body text, and indicator icon.
  • Fonts — two roles: a confident title font for row questions and a comfortable body font for the longer answer.
  • Copy — section title, optional intro, and as many row title + long-form answer pairs as your reference needs.
  • Images — optional inline images, diagrams, or quote blocks inside each open row.
  • Behavior — single-open vs multi-open rows and tune the open/close animation speed.

How remixing works

From "swiped it" to "shipped it" in three steps.

01

Pick a remix

Browse the library, find one that fits — like this one.

02

Run it through your DNA

The remix skill uses your CCOS DNA to swap colors, fonts, copy, and structure so it lands as yours.

03

Ship it

Paste the finished HTML into Thinkific, Kajabi, WordPress, or any platform that takes embed code.