Dropdown

Collapsible content sections

1 min read 122 words

Collapsible content sections using HTML<details>element.

Basic Usage

:::{dropdown} Click to expand
Hidden content goes here.
:::{/dropdown}

Open by Default

:::{dropdown} Already expanded
:open:

This content is visible by default.
:::{/dropdown}

Options

Option Type Description
open bool Expand by default
class string Additional CSS classes
icon string Custom icon name

Styling

Combine with admonition types:

:::{dropdown} Warning Details
:class: warning

Additional warning information.
:::{/dropdown}

Nesting

Dropdowns can contain any Markdown including other directives:

:::{dropdown} Outer dropdown

:::{note}
A note inside a dropdown.
:::{/note}

:::{dropdown} Nested dropdown
Inception!
:::{/dropdown}

:::{/dropdown}