@lion/ui/docs/components/collapsible/overview.md

A package of extendable web components

---
parts:
  - Collapsible
  - Overview
title: 'Collapsible: Overview'
eleventyNavigation:
  key: 'Collapsible: Overview'
  order: 10
  parent: Collapsible
  title: Overview
---

# Collapsible: Overview

A combination of a button (the invoker) and a chunk of 'extra content'. This web component can be extended with an animation to disclose the extra content. There are two slots available respectively; `invoker` to specify the collapsible's invoker and `content` for the extra content of the collapsible.

```js script
import { html } from '@mdjs/mdjs-preview';
import '@lion/ui/define/lion-collapsible.js';
```

```js preview-story
export const main = () => html`
  <lion-collapsible>
    <button slot="invoker">More about cars</button>
    <div slot="content">
      Most definitions of cars say that they run primarily on roads, seat one to eight people, have
      four tires, and mainly transport people rather than goods.
    </div>
  </lion-collapsible>
`;
```

## Features

- Use `opened` attribute or `toggle()` method to render default open.
- `invoker` slot can be custom template e.g. our [button](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/button/overview.md) or native `button` with custom styling.
- Observe the state with the help of `@opened-changed` event.
- `show()` and `hide()` are helper methods to hide or show the content from outside.

## Installation

```bash
npm i --save @lion/ui
```

```js
import { LionCollapsible } from '@lion/ui/collapsible.js';
// or
import '@lion/ui/define/lion-collapsible.js';
```