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

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 you need to set its height 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'

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.

Attributes

Property	Type	Default	Description
`size`	`CommonSize`	`'sm'`	The size of the accordion. Default is `sm`. Can be `sm` or `lg`.
`headingLevel`	`HeadingLevel`	`4`	The heading level of the accordion. Default is `4`. Can be `1`, `2`, `3`, `4`, `5`, or `6`.
`opened`	`boolean`	`false`	Whether the accordion is opened.
`iconLocation`	`'left' 'right'`	`'right'`	The location of the icon. Default is `left`. Can be `left` or `right`.

Events

Event Name	Description
`dds-opened`	Event fired when the accordion is opened.
`dds-closed`	Event fired when the accordion is closed.

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.
`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.