Lion Logo Lion Guides Components Docs Blog Toggle darkmode

Collapsible: Features

Default open

Add the opened attribute to keep the component default open.


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


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