217 字
1 分钟
Markdown Collapse Panels

Collapse panels keep related optional details in one compact group. Titles and bodies retain inline and block Markdown, while native disclosure semantics make every panel usable without client JavaScript.

Independent panels#

Items open independently by default. Prefix a title with :+ to open that item initially or :- to keep it closed when the group uses expand.

Package requirements

Use Node.js 22 or newer and enable Corepack before installing packages.

Install dependencies

Run the workspace package command from the repository root.

Terminal window
pnpm.cmd install
Validation commands

Check the content pipeline before building the production output.

  • pnpm.cmd check:manifest
  • npx.cmd astro check

Accordion mode#

Add accordion when only one answer should remain open. The browser groups the native disclosures directly, so opening another item closes the previous one without hydration.

What does expand do here?

It opens the first item initially when no item has a :+ marker.

Can a title contain Markdown?

Yes. Titles support inline emphasis and code, while panel bodies support full block Markdown.

What happens on a narrow screen?

Content padding becomes compact, long text wraps, and embedded code keeps its own horizontal scrolling area.

Author syntax#

::: collapse accordion
- :+ First title
First panel content.
- Second title with `code`
Second panel content.
:::

The container must contain exactly one top-level unordered list. Every item needs a title paragraph, a blank line, and body content. Invalid or mixed input remains an ordinary readable Markdown list.

Markdown Collapse Panels
https://shirone.mysqil.com/posts/collapse-panels/
作者
Shirone
发布于
2026-08-28
许可协议
CC BY-NC-SA 4.0

分享文章

生成精美分享图或复制链接,与更多人分享本文。

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取