mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
61bd24bc1e
* Document Card disabled prop and Accordion deep linking Generated-By: mintlify-agent * Apply suggestions from code review Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> * concision --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
109 lines
3.0 KiB
Plaintext
109 lines
3.0 KiB
Plaintext
---
|
|
title: "Accordions"
|
|
description: "Use accordions to show and hide content sections, organize information, and enable progressive disclosure in your documentation."
|
|
keywords: ["accordions", "collapsible content", "expandable sections", "progressive disclosure"]
|
|
---
|
|
|
|
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 />
|