Accordion

<lynk-accordion> | LynkAccordion

stable

Since 1.0

A vertically stacked set of interactive Panels that can expand to reveal an associated section of content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<lynk-accordion>
  <lynk-panel heading="First">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
  <lynk-panel heading="Second" expanded>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
  <lynk-panel heading="Third">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
</lynk-accordion>

Examples

Multiple

To allow multiple panels to be expanded, use the multiple attribute.

<lynk-accordion multiple>
  <lynk-panel heading="First" expanded>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
  <lynk-panel heading="Second" expanded>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
  <lynk-panel heading="Third" expanded>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
</lynk-accordion>

Density & Dividers

The density attribute can change the spacing between each accordion panel. Use density="flush" to remove all spacing and apply a single pixel divider between each panel.

<lynk-accordion density="flush">
  <lynk-panel heading="First">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
  <lynk-panel heading="Second" expanded>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
  <lynk-panel heading="Third">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
</lynk-accordion>

The divider width and color can be customized using the --divider css property.

<lynk-accordion density="flush" style="--divider: 2px solid var(--lynk-color-warning)">
  <lynk-panel heading="First">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
  <lynk-panel heading="Second" expanded>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
  <lynk-panel heading="Third">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
</lynk-accordion>

Give each panel more space by applying the density="comfy" attribute. Note that the divider is only available for the flushed density.

<lynk-accordion density="comfy">
  <lynk-panel heading="First">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
  <lynk-panel heading="Second" expanded>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
  <lynk-panel heading="Third">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </lynk-panel>
</lynk-accordion>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler

To import this component using a bundler:

import '@uplynk/lynk-design/dist/components/accordion/accordion.js';

Properties

Name	Description	Type	Default
`multiple`	Allow multiple panels to be open at the same time or automatically collapse other panels	`boolean`	`false`
`density`	Allow multiple panels to be open at the same time or automatically collapse other panels	`'flush' \| 'compact' \| 'comfy' \| undefined`	-
`shape`	Allow multiple panels to be open at the same time or automatically collapse other panels	`'rounded' \| 'square' \| undefined`	-
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Methods

Name	Description	Arguments
`expandAll()`	Expands all panels.	-
`collapseAll()`	Collapses all panels	-

Learn more about methods.