# 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:

<span class="gd-details-chevron" aria-hidden="true"></span>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:

<span class="gd-details-chevron" aria-hidden="true"></span>Details


Content with the default summary text.


# Open by Default

Add the `.open` class to start expanded:

<span class="gd-details-chevron" aria-hidden="true"></span>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:

<span class="gd-details-chevron" aria-hidden="true"></span>Section One


Content for the first section.


<span class="gd-details-chevron" aria-hidden="true"></span>Section Two


Content for the second section.


<span class="gd-details-chevron" aria-hidden="true"></span>Section Three


Content for the third section.