# Disclosure
A disclosure is a collapsible section of content. It is composed of a a header with a heading and
trigger button, and a panel that contains the content.
## Vanilla CSS example
```tsx
import {Disclosure, DisclosureHeader, DisclosurePanel} from 'vanilla-starter/Disclosure';
System RequirementsDetails about system requirements here.
```
### Disclosure.tsx
```tsx
'use client';
import {Button} from 'react-aria-components/Button';
import {
Disclosure as AriaDisclosure,
DisclosurePanel as AriaDisclosurePanel,
type DisclosureProps,
type DisclosurePanelProps,
type HeadingProps
} from 'react-aria-components/Disclosure';
import {Heading} from './Content';
import {ChevronRight} from 'lucide-react';
import './Disclosure.css';
export function Disclosure(props: DisclosureProps) {
return ;
}
export function DisclosureHeader({children, ...props}: HeadingProps) {
return (
);
}
export function DisclosurePanel(props: DisclosurePanelProps) {
return (
);
}
```
## Expanding
Use the `isExpanded` or `defaultExpanded` prop to set the expanded state, and `onExpandedChange` to handle user interactions.
```tsx
import {Disclosure, DisclosureHeader, DisclosurePanel} from 'vanilla-starter/Disclosure';
import {useState} from 'react';
function Example() {
let [isExpanded, setIsExpanded] = useState(true);
return (
{/*- end highlight -*/}
Download, Install, and Set UpInstructions on how to download, install, and set up
);
}
```
## Content
Add interactive elements such as buttons adjacent to the disclosure heading by wrapping them in a `