269 lines
3.7 KiB
Markdown
269 lines
3.7 KiB
Markdown
---
|
|
title: Collapsible panel
|
|
icon: carbon:collapse-categories
|
|
createTime: 2025/03/25 10:13:04
|
|
permalink: /en/guide/markdown/collapse/
|
|
badge:
|
|
type: tip
|
|
text: 1.0.0-rc.137 +
|
|
---
|
|
|
|
## Overview
|
|
|
|
In Markdown, the `::: collapse` container, combined with Markdown unordered list syntax, can be used to create ==collapsible panels==.
|
|
|
|
- It supports setting the mode to **accordion** using the `accordion` option.
|
|
|
|
## Enable
|
|
|
|
This feature is not enabled by default. You need to enable it in the `theme` configuration.
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
markdown: {
|
|
collapse: true, // [!code ++]
|
|
}
|
|
})
|
|
})
|
|
```
|
|
|
|
## Usage
|
|
|
|
In Markdown, use the `::: collapse` container with Markdown unordered list syntax, where each item represents a separate collapsible area.
|
|
|
|
```md title="collapse.md"
|
|
::: collapse
|
|
- Title 1 <!-- Title, click to control expand/collapse -->
|
|
<!-- There must be an empty line between the title and the content -->
|
|
Content <!-- Content, the collapsible area -->
|
|
|
|
- Title 2
|
|
|
|
Content
|
|
:::
|
|
```
|
|
|
|
For each item in the list:
|
|
|
|
- From the **first line** to the **first empty line** is the **title**.
|
|
- **After the first empty line**: The main content.
|
|
|
|
:::important Please note the correct indentation
|
|
:::
|
|
|
|
**A simple example:**
|
|
|
|
**Input:**
|
|
|
|
```md
|
|
::: collapse
|
|
- Title 1
|
|
|
|
Main content
|
|
|
|
- Title 2
|
|
|
|
Main content
|
|
:::
|
|
```
|
|
|
|
**Output:**
|
|
|
|
::: collapse
|
|
|
|
- Title 1
|
|
|
|
Main content
|
|
|
|
- Title 2
|
|
|
|
Main content
|
|
:::
|
|
|
|
## Configuration
|
|
|
|
After the `::: collapse` container syntax, you can add configuration options:
|
|
|
|
- `accordion`: Sets the collapsible panels to ==accordion== mode. In accordion mode, only one panel can be expanded at a time. Clicking another panel will close the previously opened one.
|
|
- `expand`: Expands all panels by default. This option is invalid in accordion mode.
|
|
|
|
Before the title of each list item, you can use special markers `:+` or `:-` to set the initial state of the item to **expanded** or **collapsed**.
|
|
|
|
## Examples
|
|
|
|
### Basic Usage
|
|
|
|
**Input:**
|
|
|
|
```md
|
|
::: collapse
|
|
- Title 1
|
|
|
|
Main content
|
|
|
|
- Title 2
|
|
|
|
Main content
|
|
:::
|
|
```
|
|
|
|
**Output:**
|
|
|
|
::: collapse
|
|
|
|
- Title 1
|
|
|
|
Main content
|
|
|
|
- Title 2
|
|
|
|
Main content
|
|
:::
|
|
|
|
### Expand All by Default
|
|
|
|
Add the `expand` option to expand all panels by default.
|
|
|
|
**Input:**
|
|
|
|
```md /expand/
|
|
::: collapse expand
|
|
- Title 1
|
|
|
|
Main content
|
|
|
|
- Title 2
|
|
|
|
Main content
|
|
:::
|
|
```
|
|
|
|
**Output:**
|
|
|
|
::: collapse expand
|
|
|
|
- Title 1
|
|
|
|
Main content
|
|
|
|
- Title 2
|
|
|
|
Main content
|
|
:::
|
|
|
|
### Accordion Mode
|
|
|
|
Add the `accordion` option to set the mode to accordion, allowing only one panel to be expanded at a time. Clicking another panel will close the previously opened one.
|
|
|
|
```md /accordion/
|
|
::: collapse accordion
|
|
- Title 1
|
|
|
|
Main content
|
|
|
|
- Title 2
|
|
|
|
Main content
|
|
|
|
- Title 3
|
|
|
|
Main content
|
|
:::
|
|
```
|
|
|
|
**Output:**
|
|
|
|
::: collapse accordion
|
|
|
|
- Title 1
|
|
|
|
Main content
|
|
|
|
- Title 2
|
|
|
|
Main content
|
|
|
|
- Title 3
|
|
|
|
Main content
|
|
:::
|
|
|
|
### Expand Items with `:+`
|
|
|
|
By default, all collapsible panels are closed. You can use the `:+` marker to set the initial state of an item to expanded.
|
|
|
|
**Input:**
|
|
|
|
```md /:+/
|
|
::: collapse
|
|
- Title 1
|
|
|
|
Main content
|
|
|
|
- :+ Title 2
|
|
|
|
Main content
|
|
|
|
- :+ Title 3
|
|
|
|
Main content
|
|
:::
|
|
```
|
|
|
|
**Output:**
|
|
|
|
::: collapse
|
|
|
|
- Title 1
|
|
|
|
Main content
|
|
|
|
- :+ Title 2
|
|
|
|
Main content
|
|
|
|
- :+ Title 3
|
|
|
|
Main content
|
|
:::
|
|
|
|
### Collapse Items with `:-`
|
|
|
|
When the `expand` option is configured, all panels are expanded by default. You can use the `:-` marker to set the initial state of an item to collapsed.
|
|
|
|
**Input:**
|
|
|
|
```md /:-/
|
|
::: collapse expand
|
|
- Title 1
|
|
|
|
Main content
|
|
|
|
- :- Title 2
|
|
|
|
Main content
|
|
|
|
- Title 3
|
|
|
|
Main content
|
|
:::
|
|
```
|
|
|
|
**Output:**
|
|
|
|
::: collapse expand
|
|
|
|
- Title 1
|
|
|
|
Main content
|
|
|
|
- :- Title 2
|
|
|
|
Main content
|
|
|
|
- Title 3
|
|
|
|
Main content
|
|
:::
|