---
name: Expanders
menu: Patterns
parent: Modules
route: /patterns/expanders
---

# Expanders

## Accordion

Accordion is a header which can be clicked to hide or reveal additional content.

The `level` prop states the heading level for assistive technologies.

```specimen-react
<Accordion label="Energy specialist" level={3}>
  <p>This is an exciting opportunity for a Head of Product to join a very fast growth tech-led company.</p>
  <p>Bulb is making energy simpler, cheaper, greener. We are an independent energy supplier that provides 100% renewable electricity and gas to homes across the UK. We have developed a unique operating model to provide affordable renewable energy to UK homes and businesses while offering excellent service – the best in the industry.</p>
  <p>Technology is at the very core of both our business and our members' experiences. It helps our highly motivated people to offer truly great service to our members at very low cost.</p>
</Accordion>
```

You can set the Accordion to be open by default using the `openByDefault` prop.

```specimen-react
<Accordion label="Energy specialist" level={3} openByDefault={true}>
  <p>This is an exciting opportunity for a Head of Product to join a very fast growth tech-led company.</p>
  <p>Bulb is making energy simpler, cheaper, greener. We are an independent energy supplier that provides 100% renewable electricity and gas to homes across the UK. We have developed a unique operating model to provide affordable renewable energy to UK homes and businesses while offering excellent service – the best in the industry.</p>
  <p>Technology is at the very core of both our business and our members' experiences. It helps our highly motivated people to offer truly great service to our members at very low cost.</p>
</Accordion>
```

If you need to use a custom heading, pass in a `headingComponent`:

```specimen-react
<Accordion label="Energy specialist" level={3} headingComponent={(<span>Energy Specialist <Stamp isSmall={true}>NEW</Stamp></span>)}>
  <p>This is an exciting opportunity for a Head of Product to join a very fast growth tech-led company.</p>
  <p>Bulb is making energy simpler, cheaper, greener. We are an independent energy supplier that provides 100% renewable electricity and gas to homes across the UK. We have developed a unique operating model to provide affordable renewable energy to UK homes and businesses while offering excellent service – the best in the industry.</p>
  <p>Technology is at the very core of both our business and our members' experiences. It helps our highly motivated people to offer truly great service to our members at very low cost.</p>
</Accordion>
```

## Expander

Expander is a button that can be clicked to hide or reveal additional content.

```specimen-react
<Expander
  showMessage="Show content"
  hideMessage="Hide content"
  opened={false}
>
  test content
</Expander>
```

You can supply a `onToggle` callback function to take action when the Expander is opened:

```specimen-react
<Expander
  showMessage="Show content"
  hideMessage="Hide content"
  opened={false}
  onToggle={isOpen => expanderToggled(isOpen)}
>
  test content
</Expander>
```
