Accordion - Astridd

Overview

This component is built from mobile upwards. Accordion allows you to toggle whether content is shown or hidden using some form of toggle, and adds transitions to the target. It can also be used to automatically hide content on mobile but show on desktop.

Examples

Default variation

Multi Accordion 1

Content 1.

Multi Accordion 2

Content 2.

<div class="accordion" data-myob-accordion data-accordion-open-on="large">
<div class="accordion__item" data-accordion-item>
<a href="#" class="accordion__title" data-accordion-toggle data-accordion-target="accordion-1">
Multi Accordion 1
<svg role="img" class="accordion__arrow icon icon-chevron-b icon--xxs">
<title>Toggle Section</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<div class="accordion__panel" id="accordion-1">
<div class="accordion__content">
Content 1.
</div>
</div>
</div>
<div class="accordion__item" data-accordion-item>
<a href="#" class="accordion__title" data-accordion-toggle data-accordion-target="accordion-2">
Multi Accordion 2
<svg role="img" class="accordion__arrow icon icon-chevron-b icon--xxs">
<title>Toggle Section</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<div class="accordion__panel" id="accordion-2">
<div class="accordion__content">
Content 2.
</div>
</div>
</div>
</div>

Bordered variation

Multi Accordion 1

Content 1.

Multi Accordion 2

Content 2.

<div class="accordion accordion--bordered" data-myob-accordion>
<div class="accordion__item" data-accordion-item>
<a href="#" class="accordion__title" data-accordion-toggle data-accordion-target="accordion-bordered-1">
Multi Accordion 1
<svg role="img" class="accordion__arrow icon icon-chevron-b icon--xxs">
<title>Toggle Section</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<div class="accordion__panel" id="accordion-bordered-1">
<div class="accordion__content">
Content 1.
</div>
</div>
</div>
<div class="accordion__item" data-accordion-item>
<a href="#" class="accordion__title" data-accordion-toggle data-accordion-target="accordion-bordered-2">
Multi Accordion 2
<svg role="img" class="accordion__arrow icon icon-chevron-b icon--xxs">
<title>Toggle Section</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<div class="accordion__panel" id="accordion-bordered-2">
<div class="accordion__content">
Content 2.
</div>
</div>
</div>
</div>

Single expand variation

Multi Accordion 1

Content 1.

Multi Accordion 2

Content 2.

<div class="accordion accordion--bordered" data-myob-accordion data-accordion-single-expand data-accordion-open-on="large">
<div class="accordion__item" data-accordion-item>
<a href="#" class="accordion__title" data-accordion-toggle data-accordion-target="accordion-single-expand-1">
Multi Accordion 1
<svg role="img" class="accordion__arrow icon icon-chevron-b icon--xxs">
<title>Toggle Section</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<div class="accordion__panel" id="accordion-single-expand-1">
<div class="accordion__content">
Content 1.
</div>
</div>
</div>
<div class="accordion__item" data-accordion-item>
<a href="#" class="accordion__title" data-accordion-toggle data-accordion-target="accordion-single-expand-2">
Multi Accordion 2
<svg role="img" class="accordion__arrow icon icon-chevron-b icon--xxs">
<title>Toggle Section</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
</svg>
</a>
<div class="accordion__panel" id="accordion-single-expand-2">
<div class="accordion__content">
Content 2.
</div>
</div>
</div>
</div>

Usage guidelines

We're so sorry, there are currently no usage guidelines for this component 😥

If you feel you can help out your fellow designers by creating usage guidelines for this component, please reach out to @marquee on the #astridd Slack channel.

Implementation guidelines

Name	Attribute	Description
Transition	`data-accordion-trans="<transition-class>"`	Class that is used to customise the expand and collapse transition for the accordion panel.
Breakpoint Display	`data-accordion-open-on`	*Optional: Use this to specify what breakpoint `small, medium, large, xlarge, xxlarge` is used to show the accordion content by default. Otherwise it is closed by default on all breakpoints.
Single Expand	`data-accordion-single-expand`	*Optional: Use this to ensure only one accordion item is expanded at a time. By default you can expand multiple. When this is used with `data-accordion-open-on`, only the first accordion item will be opened automatically.
accordion Item	`data-accordion-item`	Sets the group/wrapper that contains the toggle and content.
Toggle	`data-accordion-toggle="accordion"`	Sets the toggle responsible for trggering the transition on the target.
Target	`data-accordion-target="<target-id>"`	Must be added to the toggle to make sure it gets linked with the correct target.
Target Id	`id="<target-id>"`	Must be identical to the toggle's `data-accordion-target` to make sure it will receive the transition classes and methods.