Collapse Panel
Overview
In markdown, use the ::: collapse container with markdown unordered list syntax to implement collapse panels.
- Supports accordion mode via the
accordionsetting
This feature is disabled by default. You need to enable it in the theme configuration.
export default defineUserConfig({
theme: plumeTheme({
markdown: {
collapse: true,
}
})
})Syntax
In markdown, use the ::: collapse container with markdown unordered list syntax. Each item represents a separate collapsible section.
::: collapse
- Title 1 <!-- Title, click to control expand/collapse -->
<!-- Must have an empty line between title and content -->
Content <!-- Content, the collapsible area -->
- Title 2
Content
:::For each list item:
Everything from the first line to the first empty line is considered the title
After the first empty line: Content
Please ensure correct indentation
A simple example:
Input:
::: collapse
- Title 1
Content
- Title 2
Content
:::Output:
Configuration
After the ::: collapse container syntax, follow with configuration options:
accordion: Sets the collapse panel to accordion mode. In accordion mode, only one panel can be expanded at a time; clicking other panels will close the previously opened panel.expand: Expands panels by default. In accordion (accordion) mode,expandexpands the first panel; if a:+-marked item already exists in the list, the:+-marked item takes precedence.
In list items, before the title, use special markers :+ / :- to set the initial state of the current item to expanded / collapsed.
Examples
Basic Usage
Input:
::: collapse
- Title 1
Content
- Title 2
Content
:::Output:
Expand All by Default
Add the expand option to expand all panels by default.
Input:
::: collapse expand
- Title 1
Content
- Title 2
Content
:::Output:
Accordion Mode
Add the accordion option to set accordion mode, where only one panel can be expanded at a time.
::: collapse accordion
- Title 1
Content
- Title 2
Content
- Title 3
Content
:::Output:
:+ Mark Item as Expanded
Collapse panels are closed by default. Use :+ to mark items with an initial expanded state.
Input:
::: collapse
- Title 1
Content
- :+ Title 2
Content
- :+ Title 3
Content
:::Output:
:- Mark Item as Collapsed
When collapse panel is configured with expand, all panels are expanded by default. Use :- to mark items with an initial collapsed state.
Input:
::: collapse expand
- Title 1
Content
- :- Title 2
Content
- Title 3
Content
:::Output:
