Basic Usage

The ::: {.details} fenced div creates enhanced collapsible sections with smooth animation and accessible markup.

Simple Collapsible

A basic collapsible section with a title:

Click to expand

This content is hidden by default. Click the summary bar above to reveal it.

You can include bold, italic, and code formatting.

Default Title

Omitting the summary gives a default label:

Details

Content with the default summary text.

Open by Default

Add the .open class to start expanded:

Already expanded

This section is visible when the page loads. The reader can still click the summary bar to collapse it.

Multiple Sections

Several collapsible sections in sequence:

Section One

Content for the first section.

Section Two

Content for the second section.

Section Three

Content for the third section.