Accordion - Astridd

Overview

Accordions are used to add extra information in a confined area.

Examples

Single Expand variation

Content 1. Content 1. Content 1. Content 1. Content 1. Content 1.

Content 2. Content 2. Content 2. Content 2. Content 2. Content 2.

<div class="accordion" data-myob-accordion data-allow-all-closed="true">
  <div class="accordion__item" data-accordion-item>
    <a href="#" class="accordion__title">Basic Accordion 1</a>
    <div class="accordion__content" data-tab-content>
      Content 1. Content 1. Content 1. Content 1. Content 1. Content 1.
    </div>
  </div>
  <div class="accordion__item" data-accordion-item>
    <a href="#" class="accordion__title">Basic Accordion 2</a>
    <div class="accordion__content" data-tab-content>
      Content 2. Content 2. Content 2. Content 2. Content 2. Content 2.
    </div>
  </div>
</div>

Multi Expand variation

Multi Accordion 1

Content 1. Content 1. Content 1. Content 1. Content 1. Content 1.

Multi Accordion 2

Content 2. Content 2. Content 2. Content 2. Content 2. Content 2.

<div class="accordion" data-myob-accordion data-allow-all-closed="true" data-multi-expand="true" data-analytics-accordion>
  <div class="accordion__item" data-accordion-item>
    <a href="#" class="accordion__title">Multi Accordion 1</a>
    <div class="accordion__content" data-tab-content>
      Content 1. Content 1. Content 1. Content 1. Content 1. Content 1.
    </div>
  </div>
  <div class="accordion__item" data-accordion-item>
    <a href="#" class="accordion__title">Multi Accordion 2</a>
    <div class="accordion__content" data-tab-content>
      Content 2. Content 2. Content 2. Content 2. Content 2. Content 2.
    </div>
  </div>
</div>

Plain variation

This variation is to be deprecated

Basic Accordion 1

Content 1. Content 1. Content 1. Content 1. Content 1. Content 1.

Basic Accordion 2

Content 2. Content 2. Content 2. Content 2. Content 2. Content 2.

<div class="accordion accordion--plain" data-myob-accordion data-allow-all-closed="true">
  <div class="accordion__item" data-accordion-item>
    <a href="#" class="accordion__title">Basic Accordion 1</a>
    <div class="accordion__content" data-tab-content>
      Content 1. Content 1. Content 1. Content 1. Content 1. Content 1.
    </div>
  </div>
  <div class="accordion__item" data-accordion-item>
    <a href="#" class="accordion__title">Basic Accordion 2</a>
    <div class="accordion__content" data-tab-content>
      Content 2. Content 2. Content 2. Content 2. Content 2. Content 2.
    </div>
  </div>
</div>

Usage guidelines

Dos	Donts
Do use in situations where information is suited to being broken down into section e.g. 'FAQs'.	Don't place large amounts of content inside the Accordion area. Consider splitting out into a seperate page.
Do ensure headings accurately represent the content housed within.	Don't nest an Accordion inside another Accordion.

Implementation guidelines

Name	Attribute	Description
Multi expand	`data-multi-expand='true'`	Allow multiple Accordion panes to be open at the same time.