mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
skeptrune
9200586a3a
* docs: boost search ranking for single-word title pages Apply `boost: 3` to English pages whose H1 / frontmatter title is a single word (e.g. "Assistant", "Quickstart", "Cards"). Short titles tend to be canonical landing pages for a topic, so users searching the exact term should land on them first. * docs: drop boost on websocket-playground stub to keep canonical Playground ranking `api-playground/websocket-playground.mdx` is an auto-generated AsyncAPI stub with no body content but shares the title "Playground" with `api-playground/overview.mdx`. Boosting both equally diluted the canonical overview page in search for the query "playground". Drop the boost on the stub.
110 lines
3.1 KiB
Plaintext
110 lines
3.1 KiB
Plaintext
---
|
|
title: "Accordions"
|
|
description: "Use the accordion component to show and hide content sections, organize related information, and enable progressive disclosure in your docs."
|
|
keywords: ["accordions", "collapsible content", "expandable sections", "progressive disclosure"]
|
|
boost: 3
|
|
---
|
|
|
|
import IconsOptional from "/snippets/icons-optional.mdx";
|
|
|
|
Accordions allow users to expand and collapse content sections. Use accordions for progressive disclosure and to organize information.
|
|
|
|
When you open an accordion, the URL hash updates, which allows you to share direct links to specific accordion sections.
|
|
|
|
## Single accordion
|
|
|
|
<Accordion title="I am an Accordion.">
|
|
You can put any content in here, including other components, like code:
|
|
```java HelloWorld.java
|
|
class HelloWorld {
|
|
public static void main(String[] args) {
|
|
System.out.println("Hello, World!");
|
|
}
|
|
}
|
|
```
|
|
</Accordion>
|
|
|
|
````mdx Accordion example
|
|
<Accordion title="I am an Accordion.">
|
|
You can put any content in here, including other components, like code:
|
|
|
|
```java HelloWorld.java
|
|
class HelloWorld {
|
|
public static void main(String[] args) {
|
|
System.out.println("Hello, World!");
|
|
}
|
|
}
|
|
```
|
|
</Accordion>
|
|
````
|
|
|
|
## Accordion groups
|
|
|
|
Group related accordions together using `<AccordionGroup>`. This creates a cohesive section of accordions that can be individually expanded or collapsed.
|
|
|
|
<AccordionGroup>
|
|
<Accordion title="Getting started">
|
|
You can put other components inside Accordions.
|
|
|
|
```java HelloWorld.java
|
|
class HelloWorld {
|
|
public static void main(String[] args) {
|
|
System.out.println("Hello, World!");
|
|
}
|
|
}
|
|
```
|
|
</Accordion>
|
|
|
|
<Accordion title="Advanced features" icon="bot">
|
|
Add icons to make accordions more visually distinct and scannable.
|
|
</Accordion>
|
|
|
|
<Accordion title="Troubleshooting">
|
|
Keep related content organized into groups.
|
|
</Accordion>
|
|
</AccordionGroup>
|
|
|
|
````mdx Accordion Group Example
|
|
<AccordionGroup>
|
|
<Accordion title="Getting started">
|
|
You can put other components inside Accordions.
|
|
|
|
```java HelloWorld.java
|
|
class HelloWorld {
|
|
public static void main(String[] args) {
|
|
System.out.println("Hello, World!");
|
|
}
|
|
}
|
|
```
|
|
</Accordion>
|
|
|
|
<Accordion title="Advanced features" icon="alien-8bit">
|
|
Add icons to make accordions more visually distinct and scannable.
|
|
</Accordion>
|
|
|
|
<Accordion title="Troubleshooting">
|
|
Keep related content organized into groups.
|
|
</Accordion>
|
|
</AccordionGroup>
|
|
````
|
|
|
|
## Properties
|
|
|
|
<ResponseField name="title" type="string" required>
|
|
Title in the Accordion preview.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="description" type="string">
|
|
Detail below the title in the Accordion preview.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="defaultOpen" type="boolean" default="false">
|
|
Whether the Accordion is open by default.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="id" type="string">
|
|
A custom ID for the accordion used for anchor linking. If omitted, defaults to the same value as `title`.
|
|
</ResponseField>
|
|
|
|
<IconsOptional />
|