@lion/ui/docs/components/collapsible/use-cases.md

A package of extendable web components

---
parts:
  - Collapsible
  - Use Cases
title: 'Collapsible: Use Cases'
eleventyNavigation:
  key: 'Collapsible: Use Cases'
  order: 20
  parent: Collapsible
  title: Use Cases
---

# Collapsible: Use Cases

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

## Default open

Add the `opened` attribute to keep the component default open.

```js preview-story
export const defaultOpen = () => html`
  <lion-collapsible opened>
    <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>
`;
```

## Methods

There are the following methods available to control the extra content for the collapsible.

- `toggle()`: toggle the extra content
- `show()`: show the extra content
- `hide()`: hide the extra content

```js preview-story
export const methods = ({ shadowRoot }) => html`
  <lion-collapsible id="car-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>
  <section style="margin-top:16px">
    <button @click="${() => shadowRoot.querySelector('#car-collapsible').toggle()}">
      Toggle content
    </button>
    <button @click="${() => shadowRoot.querySelector('#car-collapsible').show()}">
      Show content
    </button>
    <button @click="${() => shadowRoot.querySelector('#car-collapsible').hide()}">
      Hide content
    </button>
  </section>
`;
```

## Events

`lion-collapsible` fires an event on `invoker` click to notify the component's current state. It is useful for analytics purposes or to perform some actions while expanding and collapsing the component.

- `@opened-changed`: triggers when collapsible either gets opened or closed

```js preview-story
export const events = ({ shadowRoot }) => html`
  <div class="demo-custom-collapsible-state-container">
    <strong id="collapsible-state"></strong>
  </div>
  <lion-collapsible
    @opened-changed=${ev => {
      const collapsibleState = shadowRoot.getElementById('collapsible-state');
      collapsibleState.innerText = `Opened: ${ev.target.opened}`;
    }}
  >
    <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>
`;
```