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.
pnpm.cmd installValidation commands
Check the content pipeline before building the production output.
pnpm.cmd check:manifestnpx.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.
記事をシェア
シェアカードを生成するかリンクをコピーして、みんなと共有しましょう。
続きを読む
別のルートへ
ほかの記事から一貫した基準で選出
最終更新日: （40日前）
一部の内容は古くなっている可能性があります