DÁP Design System - Accordion webcomponent

Accordion

An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.

Design system docs

Examples

Default accordion

<dap-ds-accordion>
  <span slot="heading">First accordion</span>
  <dap-ds-typography variant="body" size="md">
      Firrrst Nam ultricies justo magna, id scelerisque mauris tempus
      non. Curabitur viverra nulla leo, a rutrum nisi porta a. Duis tempor
      enim lorem, vestibulum facilisis tortor pharetra quis.
  </dap-ds-typography>
</dap-ds-accordion>

Accordion sizes

Accordion comes in two sizes, small and large

<div>
  <dap-ds-accordion>
      <span slot="heading">Small accordion</span>
      <dap-ds-typography variant="body" size="md">
          Small Nam ultricies justo magna, id scelerisque mauris.
      </dap-ds-typography>
  </dap-ds-accordion>
  <dap-ds-accordion size="lg">
      <span slot="heading">Large accordion</span>
      <dap-ds-typography variant="body" size="md">
          Large Nam ultricies justo magna, id scelerisque mauris tempus.
      </dap-ds-typography>
  </dap-ds-accordion>
</div>

Icon position

<div>
  <dap-ds-accordion>
      <span slot="heading">Icon right (default)</span>
      <dap-ds-typography variant="body" size="md">
          Firrrst Nam ultricies justo magna, id scelerisque mauris tempus
          non. Curabitur viverra nulla leo, a rutrum nisi porta a. Duis tempor
          enim lorem, vestibulum facilisis tortor pharetra quis.
      </dap-ds-typography>
  </dap-ds-accordion>
  <dap-ds-accordion iconLocation="left">
      <span slot="heading">Icon left</span>
      <dap-ds-typography variant="body" size="md">
          Firrrst Nam ultricies justo magna, id scelerisque mauris tempus
          non. Curabitur viverra nulla leo, a rutrum nisi porta a. Duis tempor
          enim lorem, vestibulum facilisis tortor pharetra quis.
      </dap-ds-typography>
  </dap-ds-accordion>
</div>

With dap-ds-icon or custom svg

You can use dap-ds-icon or any other icon component as the icon for the accordion. You can set the icon for both the opened and closed state with the icon-opened and icon-closed slots.

Please be aware if you use dap-ds-icon or <svg> you have to set its height, width and color yourself

<dap-ds-accordion headingLevel="2">
  <span slot="icon-closed">
    <dap-ds-icon name="menu-line"></dap-ds-icon>
  </span>
  <span slot="icon-opened">
    <dap-ds-icon name="add-line"></dap-ds-icon>
  </span>
  <span slot="heading"
    >Custom icon</span
  >
  <dap-ds-typography variant="body" size="md">
    Morbi magna quam, condimentum tincidunt metus u.</dap-ds-typography
  >
</dap-ds-accordion>

Accordion group

Accordion group is a wrapper for multiple accordions, it will handle the open and close state of the accordions.

<div>
  <dap-ds-accordion-group>
      <dap-ds-accordion>
          <span slot="heading">First accordion</span>
          <dap-ds-typography variant="body" size="md">
              Firrrst Nam ultricies justo magna, id scelerisque mauris tempus
              non. Curabitur viverra nulla leo, a rutrum nisi porta a. Duis tempor
              enim lorem, vestibulum facilisis tortor pharetra quis.
          </dap-ds-typography>
      </dap-ds-accordion>
      <dap-ds-accordion>
          <span slot="heading">Second accordion</span>
          <dap-ds-typography variant="body" size="md">
              Second Nam ultricies justo magna, id scelerisque mauris tempus
              non. Curabitur viverra nulla leo, a rutrum nisi porta a. Duis tempor
              enim lorem, vestibulum facilisis tortor pharetra quis.
          </dap-ds-typography>
      </dap-ds-accordion>
  </dap-ds-accordion-group>
</div>

Custom styles

You can customize the accordion and accordion group easily by using the ::part pseudo selectors.

Clean style

HTML

<dap-ds-accordion class="clean-item">
    <span slot="heading">First accordion</span>
    <dap-ds-typography variant="body" size="md">
        Firrrst Nam ultricies justo magna, id scelerisque mauris tempus
        non. Curabitur viverra nulla leo, a rutrum nisi porta a. Duis tempor
        enim lorem, vestibulum facilisis tortor pharetra quis.
    </dap-ds-typography>
</dap-ds-accordion>

CSS

.clean-item::part(base) {
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.clean-item::part(heading):hover,
.clean-item::part(heading):active {
  text-decoration: underline;
  background-color: transparent;
}

Collapsed group style

HTML

<dap-ds-accordion-group class="collapsed-group">
  <dap-ds-accordion class="collapsed-item">
      <span slot="heading">First accordion</span>
      <dap-ds-typography variant="body" size="md">
          Firrrst Nam ultricies justo magna, id scelerisque mauris tempus
          non. Curabitur viverra nulla leo, a rutrum nisi porta a. Duis tempor
          enim lorem, vestibulum facilisis tortor pharetra quis.
      </dap-ds-typography>
  </dap-ds-accordion>
  <dap-ds-accordion class="collapsed-item">
      <span slot="heading">Second accordion</span>
      <dap-ds-typography variant="body" size="md">
          Second Nam ultricies justo magna, id scelerisque mauris tempus
          non. Curabitur viverra nulla leo, a rutrum nisi porta a. Duis tempor
          enim lorem, vestibulum facilisis tortor pharetra quis.
      </dap-ds-typography>
  </dap-ds-accordion>
</dap-ds-accordion-group>

CSS

.collapsed-group::part(base) {
    background-color: var(--dds-background-neutral-subtle);
    border: var(--dds-border-width-base) solid
      var(--dds-border-neutral-subtle);
    border-radius: var(--dds-radius-base);
    gap: 0;
}

.collapsed-item::part(base) {
    border-color: transparent;
    background-color: transparent;
    border-radius: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

.collapsed-item:not(:last-of-type)::part(base):after {
    border-bottom: var(--dds-border-width-base) solid
      var(--dds-border-neutral-divider);
    content: '';
    display: block;
    margin: 0 var(--dds-spacing-400);
    width: calc(100% - 2 * var(--dds-spacing-400));
}

Collapsed group and clean item style

HTML

<dap-ds-accordion-group class="collapsed-clean-group">
  <dap-ds-accordion class="clean-item collapsed-clean-item">
      <span slot="heading">First accordion</span>
      <dap-ds-typography variant="body" size="md">
          Firrrst Nam ultricies justo magna, id scelerisque mauris tempus
          non. Curabitur viverra nulla leo, a rutrum nisi porta a. Duis tempor
          enim lorem, vestibulum facilisis tortor pharetra quis.
      </dap-ds-typography>
  </dap-ds-accordion>
  <dap-ds-accordion class="clean-item collapsed-clean-item">
      <span slot="heading">Second accordion</span>
      <dap-ds-typography variant="body" size="md">
          Second Nam ultricies justo magna, id scelerisque mauris tempus
          non. Curabitur viverra nulla leo, a rutrum nisi porta a. Duis tempor
          enim lorem, vestibulum facilisis tortor pharetra quis.
      </dap-ds-typography>
  </dap-ds-accordion>
</dap-ds-accordion-group>

CSS

.clean-item::part(base) {
    border-color: transparent;
    border-radius: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .clean-item::part(heading):hover,
  .clean-item::part(heading):active {
    text-decoration: underline;
    background-color: transparent;
  }

  .collapsed-clean-group::part(base) {
    border-radius: var(--dds-radius-base);
    gap: 0;
  }

  .collapsed-clean-item:not(:last-of-type)::part(base):after {
    border-bottom: var(--dds-border-width-base) solid
      var(--dds-border-neutral-divider);
    content: '';
    display: block;
    margin: 0 var(--dds-spacing-400);
    width: calc(100% - 2 * var(--dds-spacing-400));
  }

Importing

import { DapDSAccordion } from 'dap-design-system/dist/dds'

Importing React

import { DapDSAccordionReact } from 'dap-design-system/dist/react'

Attributes

Property	Type	Description
`size`	`'sm'`, `'lg'`	The size of the accordion. Default is `sm`.
`headingLevel`	`1`, `2` , `3` , `4` , `5` , `6`	The heading level of the accordion. Default is `4`.
`opened`	`boolean`	Whether the accordion is opened. Default is `false`.
`iconLocation`	`'left'`, `'right'`	The location of the icon. Default is `right`.
`variant`	`'default'`, `'collapsed'` , `'clean'` , `'clean-collapsed'`	The variant of the accordion.
`lastItem`	`boolean`	Whether the accordion is the last item.

Slots

Name	Description
`default`	The content of the accordion.
`heading`	The heading of the accordion.
`icon-opened`	The icon when the accordion is opened.
`icon-closed`	The icon when the accordion is closed.

Events

Event Name	Description	Type
`dds-opened`	Event fired when the accordion is opened.	`{open: boolean, item: AccordionBaseElement }`
`dds-closed`	Event fired when the accordion is closed.	`{open: boolean, item: AccordionBaseElement }`

CSS Parts

Part Name	Description
`base`	The main accordion container.
`heading`	The heading of the accordion.
`button`	The button of the accordion.
`content`	The content of the accordion.
`content-container`	The container of the accordion content.
`icon-wrapper`	The icon wrapper of the accordion.
`open-icon`	The icon when the accordion is opened.
`open-icon-base`	The base of the icon when the accordion is opened.
`close-icon`	The icon when the accordion is closed.
`close-icon-base`	The base of the icon when the accordion is closed.

CSS Custom Properties

Property Name	Description
`--dds-accordion-border-width`	The width of the accordion border (default: var(--dds-border-width-base))
`--dds-accordion-border-style`	The style of the accordion border (default: solid)
`--dds-accordion-border-radius`	The border radius of the accordion (default: var(--dds-radius-base))
`--dds-accordion-border-color`	The color of the accordion border (default: var(--dds-border-neutral-divider))
`--dds-accordion-background-color`	The background color of the accordion (default: var(--dds-background-neutral-subtle))
`--dds-accordion-text-color`	The text color of the accordion (default: var(--dds-text-neutral-strong))
`--dds-accordion-hover-background`	The background color when hovering over the accordion (default: var(--dds-background-neutral-base))
`--dds-accordion-active-background`	The background color when the accordion is active (default: var(--dds-background-neutral-medium))
`--dds-accordion-icon-background`	The background color of the accordion icon (default: var(--dds-transparent-black-subtle))
`--dds-accordion-icon-color`	The color of the accordion icon (default: var(--dds-icon-neutral-base))
`--dds-accordion-icon-hover-background`	The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base))
`--dds-accordion-icon-active-background`	The background color of the accordion icon when active (default: var(--dds-transparent-black-strong))
`--dds-accordion-icon-hover-color`	The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong))
`--dds-accordion-icon-active-color`	The color of the accordion icon when active (default: var(--dds-icon-neutral-strong))
`--dds-accordion-content-color`	The color of the accordion content (default: var(--dds-text-text-neutral))
`--dds-accordion-transition-duration`	The duration of the accordion transitions (default: var(--dds-transition-fast))
`--dds-accordion-transition-timing`	The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out))
`--dds-accordion-divider-color`	The color of the divider between accordion items (default: var(--dds-border-neutral-divider))

Components

Accordion group

<dap-ds-accordion-group/>

Attributes

Property	Type	Default	Description
`autoClose`	`string`	`'true'`	Whether to close other accordions when one is opened.
`variant`	`'default'`, `'collapsed'` , `'clean'` , `'clean-collapsed'`	`'default'`	The variant of the accordion

Slots

Name	Description
`(default)`	The content of the accordion group.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main accordion group container.

CSS Custom Properties

Property Name	Description
`--dds-accordion-group-spacing`	Controls the gap between accordion items (default: var(--dds-spacing-300))
`--dds-accordion-group-border-color`	Controls the border color (default: var(--dds-border-neutral-subtle))
`--dds-accordion-group-border-width`	Controls the border width (default: var(--dds-border-width-base))
`--dds-accordion-group-border-radius`	Controls the border radius (default: var(--dds-radius-base))
`--dds-accordion-group-background`	Controls the background color (default: transparent)