# 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.
## 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 `