Accordion

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

The Accordion has two variants:

• Default
• Button only

Properties relating to the button variant & alignment will only be applied if the buttonOnly/button-only property is set.

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

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

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

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

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

Vue.js

<dhl-accordion>
  <dhl-panel>
    <span slot="heading">First heading</span>
    <dhl-text>This is the content related to the first headline</dhl-text>
  </dhl-panel>
  <dhl-panel>
    <span slot="heading">Second heading</span>
    <dhl-text>This is the content related to the second headline</dhl-text>
  </dhl-panel>
  <dhl-panel>
    <span slot="heading">Third heading</span>
    <dhl-text>This is the content related to the third headline</dhl-text>
  </dhl-panel>
</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

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

with a panel open at load

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

with a panel open at a time

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

with all panels open at load time

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

programmatically expand panels with javascript

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

<script type="module">
  const panels = document.querySelectorAll("dhl-accordion 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
buttonAlign	button-align	An optional prop that sets alignment of the button should the buttonOnly prop be set to true.	"center" \| "end" \| "start"	DHL_ACCORDION.BUTTON_ALIGN.START
buttonOnly	button-only	An optional prop used to set the variant of the accordion panel to a dhl-button component.	boolean	false
buttonVariant	button-variant	An optional prop used to set the variant of button used when the buttonOnly prop is set to true.	"primary" \| "text"	DHL_ACCORDION.BUTTON_VARIANT.PRIMARY
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	dhl-accordion-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
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

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

• Rename showExpandCollapseButton to buttonOnly

• 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

• Button variant available through buttonOnly set prop;

  • headlineAlignment -> buttonAlign

• Limit Headline style to only expose headlineTag within Accordion:

  • Remove weight prop
  • Remove size prop