mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
610f2c4f0f
- Updated components/accordions.mdx - Updated create/text.mdx - Updated quickstart.mdx - Updated contact-support.mdx - Updated cli/install.mdx - Updated ai-native.mdx - Updated docs.json Mintlify-Source: dashboard-editor
108 lines
2.9 KiB
Plaintext
108 lines
2.9 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";
|
|
|
|
Use accordions to organize information and progressively disclose content. Users can expand and collapse each section.
|
|
|
|
## 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 />
|