# Expandable (w-expandable)

## Description

Expandable is a layout component used for creating expandable content areas on a page.

[Warp component reference](https://warp-ds.github.io/docs/components/expandable/frameworks/elements)

## Usage

## Accessibility

## Examples

<elements-example>

```html
<w-expandable title="I'm expandable" animated>
  <p>with expanded content</p>
</w-expandable>
```

</elements-example>

### Expandable box

<elements-example>

```html
<w-expandable title="I'm expandable" animated box>
  <p>with expanded content</p>
</w-expandable>
```

</elements-example>


### Expandable box with custom title

This can be used if more control over styling is needed than the `title` prop allows

<elements-example>

```html
<w-expandable animated box>
  <div slot="title" class="flex flex-row items-center">
    <w-icon-bag-16></w-icon-bag-16>
    <p class="ml-8 mb-0">This is a title with an icon</p>
  </div>
  <p>with expanded content</p>
</w-expandable>
```

</elements-example>


### With expanded prop

<elements-example>

```html
<w-expandable animated box title="I'm expanded by default" expanded>
  <p>content should be visible</p>
</w-expandable>
```

</elements-example>

## Styling API

## `<w-expandable>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| animated | `boolean` | `false` | Will animate the expansion/collapse |
| bleed | `boolean` | `false` | Will make the expandable full-width on the sm breakpoint size |
| box | `boolean` | `false` | Will make the expandable a Box |
| button-class | `string \| undefined` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
| content-class | `string \| undefined` | `-` | **Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component. |
| expanded | `boolean` | `false` | Controls component's expanded state |
| heading-level | `number \| undefined` | `-` | Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element. |
| no-chevron | `boolean` | `false` | Controls chevron visibility |
| title | `string` | `-` | Component title. Used to display the title value which is always present regardless of whether the component is open or closed. |

### Property Details

#### animated

Will animate the expansion/collapse

- Type: `boolean`
- Default: `false`

#### bleed

Will make the expandable full-width on the sm breakpoint size

- Type: `boolean`
- Default: `false`

#### box

Will make the expandable a Box

- Type: `boolean`
- Default: `false`

#### button-class

**Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.



- Type: `string | undefined`
- Default: `-`

#### content-class

**Deprecated**: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.



- Type: `string | undefined`
- Default: `-`

#### expanded

Controls component's expanded state

- Type: `boolean`
- Default: `false`

#### heading-level

Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.

- Type: `number | undefined`
- Default: `-`

#### no-chevron

Controls chevron visibility

- Type: `boolean`
- Default: `false`

#### title

Component title. Used to display the title value which is always present regardless of whether the component is open or closed.

- Type: `string`
- Default: `-`

