Details

Collapsible sections using the native HTML details element

Details

Details creates a collapsible section that readers can expand and collapse. Built on the native HTML <details> element for lightweight, no-JavaScript interactivity.

Basic Usage

Click to expand

This content is hidden by default. The reader clicks the summary to reveal it.

You can include any markdown content here:

  • Lists
  • Bold text
  • inline code

Syntax:

:::details[Summary Text]
Hidden content here.
:::
Markdown

Open by Default

Add open to start the section expanded:

Already expanded

This section starts open but can still be collapsed by the reader.

Syntax:

:::details[Summary Text] open
Content expanded by default.
:::
Markdown

With Code

View the full configuration 
server:
  host: localhost
  port: 8080
  debug: false

database:
  driver: sqlite
  path: user/database/coderoo.db

cache:
  enabled: true
  ttl: 3600
YAML

Stacked Details (FAQ Style)

How do I add a new course?

Create a new directory under content/courses/ with an index.md file and lesson files with numeric prefixes.

Can I use custom themes?

Yes! Go to Admin > Themes to browse, import, or generate custom syntax highlighting themes.

How do I enable search?

Search is built in. Run php rebuild-search-index.php to build the index, then the search bar works automatically.

Best Practices

  • Use details for content that's useful but not essential for the main flow
  • Great for FAQs, optional explanations, and verbose code examples
  • Keep the summary text descriptive so readers know what they'll find inside
  • Prefer details over accordions for one-off collapsible sections