lion/docs/components/content/collapsible/overview.md

Content >> Collapsible >> Overview ||10

lion-collapsible is a combination of a button (the invoker), a chunk of 'extra content', and 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.

import { html } from '@lion/core';
import '@lion/collapsible/define';

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. lion-button 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

npm i --save @lion/collapsible

import { LionCollapsible } from '@lion/collapsible';
// or
import '@lion/collapsible/define';