Lion Logo Lion Guides Components Docs Blog Toggle darkmode

Accordion: Overview

A web component that can be used to toggle the display of sections of content. Its purpose is to reduce the need to scroll when presenting multiple sections of content on a single page. Accordions often allow users to get the big picture before focusing on details.


  • content gets provided by users (slotted in)
  • handles accessibility
  • support navigation via keyboard


npm i --save @lion/accordion
import { LionAccordion } from '@lion/accordion';
// or
import '@lion/accordion/define';


Contents are not focusable

Focusable elements should be interactive. Contents themselves do not offer any interactivity. If there is a button or a form inside the tab panel then these elements get focused directly.