# Accordions (/components/accordions)
Related: [Badge](/components/badge.md), [Banner](/components/banner.md), [Callouts](/components/callouts.md), [Cards](/components/cards.md), [Code groups](/components/code-groups.md), [Color](/components/color.md)
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 lets you share direct links to specific accordion sections.
## Single accordion [#single-accordion]
You can put any content in here, including other components, like code:
```java title="HelloWorld.java"
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
````mdx title="Accordion example"
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 groups [#accordion-groups]
Group related accordions together using ``. This creates a cohesive section of accordions that can be individually expanded or collapsed.
You can put other components inside Accordions.
```java title="HelloWorld.java"
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
Add icons to make accordions more visually distinct and scannable.
Keep related content organized into groups.
````mdx title="Accordion Group Example"
You can put other components inside Accordions.
```java HelloWorld.java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
Add icons to make accordions more visually distinct and scannable.
Keep related content organized into groups.
````
## Properties [#properties]
Title in the Accordion preview.
Detail below the title in the Accordion preview.
Whether the Accordion is open by default.
A custom ID for the accordion used for anchor linking. If omitted, defaults to the same value as `title`.
The icon to display.
Options:
* [Font Awesome](https://fontawesome.com/icons) icon name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `fontawesome` in your `docs.json`
* [Lucide](https://lucide.dev/icons) icon name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `lucide` in your `docs.json`
* [Tabler](https://tabler.io/icons) icon name, if you have the `icons.library` [property](/organize/settings-appearance#param-icons) set to `tabler` in your `docs.json`
* URL to an externally hosted icon
* Path to an icon file in your project
* SVG code wrapped in curly braces
For custom SVG icons:
1. Convert your SVG using the [SVGR converter](https://react-svgr.com/playground/).
2. Paste your SVG code into the SVG input field.
3. Copy the complete `` element from the JSX output field.
4. Wrap the JSX-compatible SVG code in curly braces: `icon={}`.
5. Adjust `height` and `width` as needed.
The [Font Awesome](https://fontawesome.com/icons) icon style. Only used with Font Awesome icons.
Options: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.