# xpl-accordion

Accordions are collapsable containers and allow users to collapse or expand the container. Useful when many items are present in a section and users may benefit from closing content to gain more space or focus on content that is most important to them. 

Use the content slot in the opened state to swap in Apollo components or make your own local component with groups of Apollo components or custom content.

Note: Users will often miss any content that is hidden behind an interaction. If it is important that users see the content, use an accordion's open state on load `initialExpanded`, or use another pattern.

<!-- Auto Generated Below -->


## Properties

| Property          | Attribute          | Description                                                                                                                                                                                                            | Type                                     | Default     |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- |
| `borderType`      | `border-type`      | set the border of the accordion  none: there’s no border wrapping the header  bottom:there’s a border below the header  bordered: the header is wrapped by a white panel with a rounded border around it on every side | `"" \| "bordered" \| "bottom" \| "none"` | `'none'`    |
| `contentId`       | `content-id`       | An optional id of the content slot                                                                                                                                                                                     | `string`                                 | `undefined` |
| `description`     | `description`      | if defined, a text field that displays under the header                                                                                                                                                                | `string`                                 | `undefined` |
| `header`          | `header`           | Sets the text for the header of the accordion                                                                                                                                                                          | `string`                                 | `undefined` |
| `initialExpanded` | `initial-expanded` | Set if the content is shown  false: the accordion is collapsed (default)  true: the accordion is expanded                                                                                                              | `boolean`                                | `false`     |
| `size`            | `size`             | Set the size of the header and icon size can be 1(default),2,3                                                                                                                                                         | `"1" \| "2" \| "3"`                      | `'3'`       |


## Methods

### `parentCheckboxChange(checked: boolean) => Promise<null>`

Updates the parent checkbox state and sets all child checkboxes to the same checked value.

#### Parameters

| Name      | Type      | Description                              |
| --------- | --------- | ---------------------------------------- |
| `checked` | `boolean` | - Whether the parent checkbox is checked |

#### Returns

Type: `Promise<null>`




## Slots

| Slot        | Description                                                       |
| ----------- | ----------------------------------------------------------------- |
| `"content"` | Content rendered inside of the collapsible body of the accordion. |
| `"heading"` | The header for the accordion component                            |


## Dependencies

### Depends on

- [xpl-icon](../xpl-icon)

### Graph
```mermaid
graph TD;
  xpl-accordion --> xpl-icon
  style xpl-accordion fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*