Accordion

An Accordion is used to hide/show content via the use of child Panel elements.

The Accordion has three style variants:

• border
• no-border
• naked

Use soloExpandable when only one panel should stay open at a time. Use iconType="chevron" for a rotating chevron, or iconType="plus-minus" for plus/minus icons.

Import

React

// with @dhl-official/react-library:
import { DhlAccordion, DhlPanel } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlAccordion, DhlPanel } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-accordion></dhl-accordion>
<dhl-panel></dhl-panel>

Vue.js

If the DUIL has been installed, you can use the web component directly:

<dhl-accordion></dhl-accordion>
<dhl-panel></dhl-panel>

Accessibility

To ensure the Accordion component is accessible, its children Panel elements are required to have a heading slot. The properties headingId and panelId are used to internally set the aria-controls and aria-labelledby attributes on the Panel and its child Headline elements. They default to random values, but can be set to a specific value if required.

Notes

• To set the heading text, ensure the container element uses heading as it's slot value.

Code

React

<DhlAccordion variant="border">
  <DhlPanel>
    <span slot="heading">First heading</span>
    <DhlText>This is the content related to the first headline</DhlText>
  </DhlPanel>
  <DhlPanel>
    <span slot="heading">Second heading</span>
    <DhlText>This is the content related to the second headline</DhlText>
  </DhlPanel>
  <DhlPanel>
    <span slot="heading">Third heading</span>
    <DhlText>This is the content related to the third headline</DhlText>
  </DhlPanel>
</DhlAccordion>

Angular

<duil301-dhl-accordion variant="border">
  <duil301-dhl-panel>
    <span slot="heading">First heading</span>
    <duil301-dhl-text>This is the content related to the first headline</duil301-dhl-text>
  </duil301-dhl-panel>
  <duil301-dhl-panel>
    <span slot="heading">Second heading</span>
    <duil301-dhl-text>This is the content related to the second headline</duil301-dhl-text>
  </duil301-dhl-panel>
  <duil301-dhl-panel>
    <span slot="heading">Third heading</span>
    <duil301-dhl-text>This is the content related to the third headline</duil301-dhl-text>
  </duil301-dhl-panel>
</duil301-dhl-accordion>

Vue.js

<duil301-dhl-accordion variant="border">
  <duil301-dhl-panel>
    <span slot="heading">First heading</span>
    <duil301-dhl-text>This is the content related to the first headline</duil301-dhl-text>
  </duil301-dhl-panel>
  <duil301-dhl-panel>
    <span slot="heading">Second heading</span>
    <duil301-dhl-text>This is the content related to the second headline</duil301-dhl-text>
  </duil301-dhl-panel>
  <duil301-dhl-panel>
    <span slot="heading">Third heading</span>
    <duil301-dhl-text>This is the content related to the third headline</duil301-dhl-text>
  </duil301-dhl-panel>
</duil301-dhl-accordion>

Interactive Demo

Readme

Usage

Dhl-accordion

Snippets of code in HTML and JavaScript to show some of the use cases for the component. The code is not meant to be executed, but to be used as a reference for the usage of the component.
Angular, React and Vue usages are not included in this documentation, but can be easily derived from the html and javascript code.

default usage

<duil301-dhl-accordion variant="border">
  <duil301-dhl-panel>
    <span slot="heading">First heading</span>
    <duil301-dhl-text>This is the content related to the first heading</duil301-dhl-text>
  </duil301-dhl-panel>
  <duil301-dhl-panel>
    <span slot="heading">Second heading</span>
    <duil301-dhl-text>This is the content related to the second heading</duil301-dhl-text>
  </duil301-dhl-panel>
  <duil301-dhl-panel>
    <span slot="heading">Third heading</span>
    <duil301-dhl-text>This is the content related to the third heading</duil301-dhl-text>
  </duil301-dhl-panel>
</duil301-dhl-accordion>

style variants

<duil301-dhl-accordion variant="border">
  <duil301-dhl-panel>
    <span slot="heading">Border heading</span>
    <duil301-dhl-text>This panel uses a bordered surface.</duil301-dhl-text>
  </duil301-dhl-panel>
</duil301-dhl-accordion>

<duil301-dhl-accordion variant="no-border">
  <duil301-dhl-panel>
    <span slot="heading">No border heading</span>
    <duil301-dhl-text>This panel keeps the surface without the visible border.</duil301-dhl-text>
  </duil301-dhl-panel>
</duil301-dhl-accordion>

<duil301-dhl-accordion variant="naked">
  <duil301-dhl-panel>
    <span slot="heading">Naked heading</span>
    <duil301-dhl-text>This panel uses horizontal divider lines only.</duil301-dhl-text>
  </duil301-dhl-panel>
</duil301-dhl-accordion>

plus and minus icons

<duil301-dhl-accordion icon-type="plus-minus">
  <duil301-dhl-panel>
    <span slot="heading">First heading</span>
    <duil301-dhl-text>The icon changes from plus to minus when expanded.</duil301-dhl-text>
  </duil301-dhl-panel>
</duil301-dhl-accordion>

with a panel open at load

<duil301-dhl-accordion>
  <duil301-dhl-panel>
    <span slot="heading">First heading</span>
    <duil301-dhl-text>This is the content related to the first heading</duil301-dhl-text>
  </duil301-dhl-panel>
  <duil301-dhl-panel>
    <span slot="heading">Second heading</span>
    <duil301-dhl-text>This is the content related to the second heading</duil301-dhl-text>
  </duil301-dhl-panel>
  <duil301-dhl-panel expanded>
    <span slot="heading">Third heading</span>
    <duil301-dhl-text>This is the content related to the third heading</duil301-dhl-text>
  </duil301-dhl-panel>
</duil301-dhl-accordion>

with a panel open at a time

<duil301-dhl-accordion solo-expandable>
  <duil301-dhl-panel>
    <span slot="heading">First heading</span>
    <duil301-dhl-text>This is the content related to the first heading</duil301-dhl-text>
  </duil301-dhl-panel>
  <duil301-dhl-panel>
    <span slot="heading">Second heading</span>
    <duil301-dhl-text>This is the content related to the second heading</duil301-dhl-text>
  </duil301-dhl-panel>
  <duil301-dhl-panel>
    <span slot="heading">Third heading</span>
    <duil301-dhl-text>This is the content related to the third heading</duil301-dhl-text>
  </duil301-dhl-panel>
</duil301-dhl-accordion>

with all panels open at load time

<duil301-dhl-accordion all-expanded>
  <duil301-dhl-panel>
    <span slot="heading">First heading</span>
    <duil301-dhl-text>This is the content related to the first heading</duil301-dhl-text>
  </duil301-dhl-panel>
  <duil301-dhl-panel>
    <span slot="heading">Second heading</span>
    <duil301-dhl-text>This is the content related to the second heading</duil301-dhl-text>
  </duil301-dhl-panel>
  <duil301-dhl-panel>
    <span slot="heading">Third heading</span>
    <duil301-dhl-text>This is the content related to the third heading</duil301-dhl-text>
  </duil301-dhl-panel>
</duil301-dhl-accordion>

programmatically expand panels with javascript

<duil301-dhl-accordion>
  <duil301-dhl-panel>
    <span slot="heading">First heading</span>
    <duil301-dhl-text>This is the content related to the first heading</duil301-dhl-text>
  </duil301-dhl-panel>
  <duil301-dhl-panel>
    <span slot="heading">Second heading</span>
    <duil301-dhl-text>This is the content related to the second heading</duil301-dhl-text>
  </duil301-dhl-panel>
  <duil301-dhl-panel>
    <span slot="heading">Third heading</span>
    <duil301-dhl-text>This is the content related to the third heading</duil301-dhl-text>
  </duil301-dhl-panel>
</duil301-dhl-accordion>

<script type="module">
  const panels = document.querySelectorAll("duil301-dhl-accordion duil301-dhl-panel");
  panels.forEach((panel, i) => {
    panel.componentOnReady().then(() => {
      panel.expanded = i % 2 === 0; // expand every other panel
    });
  });
</script>

Properties

Property	Attribute	Description	Type	Default
allExpanded	all-expanded	An optional prop that when set, opens all accordion's children panels. The expanded prop will be ignored, and all panels will be set to expanded=true regardless of their initial value	boolean	false
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	`duil301-dhl-accordion-${getRandomString()}`
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
iconType	icon-type	An optional prop that selects the expand/collapse icon set for all child panels.	"chevron" | "plus-minus"	DHL_ACCORDION.ICON_TYPE.CHEVRON
isDisabled	is-disabled	An optional flag to define if the component is disabled.	boolean	false
soloExpandable	solo-expandable	An optional prop that when set, only allows an individual panel to be open. If more than one panel is set to be open (expanded=true), only the first one will remain open.	boolean	false
variant	variant	An optional prop that sets the visual style variant of all child panels.	"border" | "naked" | "no-border"	DHL_ACCORDION.VARIANT.BORDER

Slots

Slot	Description
"unnamed"	unnamed children slot intended for multiple DhlPanel components

---

Built by DHL User Interface Library Team!

Migrating from DUIL 1.0

• The AccordionContent component is replaced by DhlPanel.

• Remove AccordionTitle. The title is now set on child element within Accordion via slot="heading".

• Remove activeIndex

• Remove focusedIndex

• Remove onTitleClick

• Remove buttonSize

• Remove iconSize

• Remove closeAlsoOnContentClick

• Remove expandButtonAriaLabel and collapseButtonAriaLabel -> content of expanding/collapsing button is determined by consume.

• Remove useAsCollapsible

• Remove expandButtonAriaControls -> aria-controls set through heading and panel id props.

• Remove expandIcon and collapseIcon prop

• Add headingId & panelId

• Limit Headline style to only expose headlineTag within Accordion:

  • Remove weight prop
  • Remove size prop