# Accordion
> Cherry Accordion component - animated disclosure with a card style and an inline variant.
Source: https://cherry.al/code/accordion
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# Accordion
The Accordion component shows and hides content behind a clickable title. It animates open and close, rotates its chevron to match, and respects `prefers-reduced-motion`.
For design guidelines and all interactive states, see the [Accordions](/accordions) design page.
```jsx
import React from "react";
import { Accordion } from "cherry-styled-components";
export default function Page() {
return (
Cherry is a design system for the modern web.
);
}
```
The inline variant drops the border, radius, and side padding for embedding inside cards or lists:
```html
Content
```
By default the accordion manages its own state. Pass `open` and `onToggle` to control it from the parent:
```html
Content
```
## Properties
The collapsible content.
The always-visible clickable title.
Removes the border, radius, and side padding for a flush, compact look.
Renders the accordion open initially (uncontrolled mode).
Controlled open state. When provided, the parent owns open/close; pair it
with `onToggle`.
Called with the next state whenever the title is clicked.
All other standard `div` attributes (`className`, `id`, `style`, `aria-*`, and
so on) are passed through to the root element; the native `title` and
`onToggle` attributes are replaced by the props above.