# Collapse

> Expandable panel with a clickable header. Two-way binds `open`. Wrap in `<wr-collapse-group accordion>` for single-open behavior.

Source: https://ngwr.dev/reference/components/collapse  
Kind: Component, Standalone

## Installation

```angular-ts
import { WrAccordion, WrCollapse, WrCollapseGroup } from 'ngwr/collapse';

// WrAccordion is <wr-accordion>, the accordion shorthand below — a separate
// class, so writing the tag without importing it renders nothing.
@Component({ imports: [WrCollapse, WrCollapseGroup, WrAccordion] })
export class MyComponent {}
```

## Basic usage

```html
<wr-collapse title="Section title">
  Section body…
</wr-collapse>
```

## Accordion

Opening one panel auto-closes the others.

```html
<!-- Either form works. `<wr-accordion>` is the shorthand: it is
     `<wr-collapse-group accordion>` with the flag baked in. -->
<wr-accordion>
  <wr-collapse title="A">…</wr-collapse>
  <wr-collapse title="B">…</wr-collapse>
  <wr-collapse title="C">…</wr-collapse>
</wr-accordion>

<wr-collapse-group accordion>
  <wr-collapse title="A">…</wr-collapse>
  <wr-collapse title="B">…</wr-collapse>
</wr-collapse-group>
```

## Collapse API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `title`required | Header text. | `string` | — |
| `open` | Two-way bindable open/closed state. | `boolean` | `false` |
| `disabled` | Disable interaction. | `boolean` | `false` |

## Collapse Group API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `accordion` | When true, opening one child closes the others. | `boolean` | `false` |

## CSS variables

Custom properties `ngwr/collapse` publishes. Each default below is declared on the component's own selector, so a `:root` override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-collapse-bg` | `var(--wr-color-surface)` | `.wr-collapse` |
| `--wr-collapse-border` | `var(--wr-color-outline)` | `.wr-collapse` |
| `--wr-collapse-color` | `var(--wr-color-on-surface)` | `.wr-collapse` +1 variant override |
| `--wr-collapse-radius` | `var(--wr-border-radius-base)` | `.wr-collapse` |