Accordion

H5P equivalent

H5P Accordion — expandable sections for reference material or optional depth.

When to use

Use Accordion to collapse supporting detail — policy excerpts, FAQ entries, or glossary-style content without overwhelming the main lesson flow.

Each section has an id, title, and content (React node). Keyboard support follows WAI-ARIA accordion patterns.

Often paired inside SlideDeck slides or Page blocks in an InteractiveBook.

Try it

Documentation demo

Use the Live demo, React, AI prompt, and Packaging / Manifest tabs below. Embedded demos disable telemetry, xAPI, and the LMS bridge. For production delivery, use the CLI template src/courseConfig.ts and LMS Go-Live.

Open demo in full tab 

<Accordion
  blockId="policy-accordion"
  sections={[
    {
      id: "reporting",
      title: "Reporting phishing",
      content: <Text>Use Report phishing in your mail client.</Text>,
    },
    {
      id: "devices",
      title: "Devices and access",
      content: <Text>Lock your screen and never approve MFA you did not initiate.</Text>,
    },
  ]}
/>

Copy into Cursor, Copilot, or ChatGPT after the vibe coding starter context:

Read lessonkit.json and src/App.tsx before editing.

Add a Accordion block (H5P-style: Accordion) like this example inside the active <Lesson>:

<Accordion
  blockId="policy-accordion"
  sections={[
    {
      id: "reporting",
      title: "Reporting phishing",
      content: <Text>Use Report phishing in your mail client.</Text>,
    },
    {
      id: "devices",
      title: "Devices and access",
      content: <Text>Lock your screen and never approve MFA you did not initiate.</Text>,
    },
  ]}
/>

Requirements:
- Import only from @lessonkit/react; use block types from block-catalog.v3.json.
- Keep existing courseId, lessonId, and navigation stable unless I ask to add a lesson.
- After edits, list changed files and what to verify in the browser (lessonkit dev).

Workflow tips: https://lessonkit.readthedocs.io/en/latest/guides/vibe-coding/prompting-and-workflows.html

Touch behavior

Section triggers use lk-button lk-accordion-trigger for full-width, 44px minimum tap targets when base theme CSS is imported.

See also