Collapsible content¶

Use an expandable note for optional instructions, a longer explanation, or troubleshooting details.

Enable¶

markdown_extensions:
  - admonition
  - pymdownx.details

pymdownx.details enables the collapsible ??? syntax; admonition also enables regular !!! notes.

For non-collapsible notes with the same styling, see Admonitions.

Closed by default¶

??? note "Show the configuration advice"

    Keep one `theme` block in `mkdocs.yml` and merge new options into it.

Open by default¶

???+ tip "Start with the defaults"

    Override only the settings your site needs.

The browser's native details element handles opening and closing, including keyboard activation. It works without the theme's JavaScript.

Native HTML alternative¶

You can also write <details> directly. For Markdown inside the body, enable md_in_html and add markdown="1":

<details markdown="1">
<summary>More information</summary>

This body supports **Markdown**.

</details>

Customization¶

These theme settings customize all collapsible blocks. Different detail types currently share the same styling:

theme:
  name: pixel-lab
  highlight_color: "#f5c842"
  surface_color: "#fffdf2"
  border_color: "#101410"
  shadow_color: "#101410"

See Common attributes.

Component-wide overrides¶

To change every collapsible block's summary fill, add this to your custom stylesheet:

details > summary {
  background: #f5c842; /* Golden yellow */
}

Scoped overrides¶

Wrap each selected block, following Scope selected instances:

<div class="instance-details" markdown="1">

??? note "More information"

    Keep the configuration in one place.

</div>

Add the scoped rule to your stylesheet:

.instance-details > details > summary {
  background: #f5c842; /* Golden yellow */
}