Skip to content

Update accordion page #941

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 23, 2025
Merged

Update accordion page #941

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 40 additions & 46 deletions components/accordions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
---
title: "Accordions"
description: "A dropdown component to toggle content visibility"
description: "Collapsible components to show and hide content"
icon: "chevron-down"
---

Accordions allow users to expand and collapse content sections. Use accordions for progressive disclosure and to organize information.

## Single accordion

<Accordion title="I am an Accordion.">
You can put any content in here, including other components, like code:
```java HelloWorld.java
Expand All @@ -15,9 +19,7 @@
```
</Accordion>

<RequestExample>

````mdx Accordion Example
````mdx Accordion example
<Accordion title="I am an Accordion.">
You can put any content in here, including other components, like code:

Expand All @@ -31,9 +33,12 @@
</Accordion>
````

````mdx Accordion Group Example
## 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="FAQ without Icon">
<Accordion title="Getting started">
You can put other components inside Accordions.

```java HelloWorld.java
Expand All @@ -43,23 +48,42 @@
}
}
```
</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.

Check out the [Accordion](/components/accordions) docs for all the supported props.
```java HelloWorld.java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
</Accordion>

<Accordion title="FAQ with Icon" icon="alien-8bit">
Check out the [Accordion](/components/accordions) docs for all the supported props.
<Accordion title="Advanced features" icon="alien-8bit">
Add icons to make accordions more visually distinct and scannable.
</Accordion>

<Accordion title="FAQ without Icon">
Check out the [Accordion](/components/accordions) docs for all the supported props.
<Accordion title="Troubleshooting">
Keep related content organized into groups.
</Accordion>
</AccordionGroup>
````

</RequestExample>

### Props
## Properties

<ResponseField name="title" type="string" required>
Title in the Accordion preview.
Expand All @@ -74,40 +98,10 @@
</ResponseField>

<ResponseField name="icon" type="string or svg">
A [Font Awesome icon](https://fontawesome.com/icons), [Lucide

Check warning on line 101 in components/accordions.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/accordions.mdx#L101 

Did you really mean 'Lucide'?
icon](https://lucide.dev/icons), or SVG code
icon](https://lucide.dev/icons), or SVG code.
</ResponseField>

<ResponseField name="iconType" type="string">
One of "regular", "solid", "light", "thin", "sharp-solid", "duotone", or
"brands"
For Font Awesome icons, one of "regular", "solid", "light", "thin", "sharp-solid", "duotone", or "brands".
</ResponseField>

## Accordion Groups

You can group multiple accordions into a single display. Simply add `<AccordionGroup>` around your existing `<Accordion>` components.

<AccordionGroup>
<Accordion title="FAQ without Icon">
You can put other components inside Accordions.

```java HelloWorld.java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```

Check out the [Accordion](/components/accordions) docs for all the supported props.

</Accordion>

<Accordion title="FAQ with Icon" icon="bot">
Check out the [Accordion](/components/accordions) docs for all the supported props.
</Accordion>

<Accordion title="FAQ without Icon">
Check out the [Accordion](/components/accordions) docs for all the supported props.
</Accordion>
</AccordionGroup>