The React documentation for this component can be read from Storybook (link here)

Accordion

Use to display large amounts of information in a scannable way, for example on an FAQ page.

Description

Environment specific behaviour:

When JavaScript is not available the hidden content in the accordion will become visible.

Data attributes:

  • [data-js-accordion]: This attribute should be added to the accordion wrapper.
  • [data-js-accordion-item]: This attribute should be added to each accordion item underneath the accordion wrapper.
  • [data-js-accordion-trigger]: This attribute should be added to the element that triggers the opening of the accordion content.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-accordion;

Import JS functionality

In order to have the JS functionality of this component available, you need to include it in your project. Assuming the project is using ES6:

import accordion from 'radius/dist/m2dm/js/accordion';
accordion();

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example

Non quis excepteur cupidatat qui enim tempor elit Lorem amet ad ut fugiat quis exercitation. Eiusmod dolore reprehenderit proident enim laboris dolore commodo consectetur nulla velit sit adipisicing aute velit. Duis velit exercitation nisi cillum exercitation aliqua enim pariatur nostrud. Aliqua ex dolore ullamco ut proident quis pariatur fugiat labore ex sint fugiat. Ipsum aliqua est minim culpa et do ipsum occaecat minim elit eu ut.
Non quis excepteur cupidatat qui enim tempor elit Lorem amet ad ut fugiat quis exercitation. Eiusmod dolore reprehenderit proident enim laboris dolore commodo consectetur nulla velit sit adipisicing aute velit. Duis velit exercitation nisi cillum exercitation aliqua enim pariatur nostrud. Aliqua ex dolore ullamco ut proident quis pariatur fugiat labore ex sint fugiat. Ipsum aliqua est minim culpa et do ipsum occaecat minim elit eu ut.
Non quis excepteur cupidatat qui enim tempor elit Lorem amet ad ut fugiat quis exercitation. Eiusmod dolore reprehenderit proident enim laboris dolore commodo consectetur nulla velit sit adipisicing aute velit. Duis velit exercitation nisi cillum exercitation aliqua enim pariatur nostrud. Aliqua ex dolore ullamco ut proident quis pariatur fugiat labore ex sint fugiat. Ipsum aliqua est minim culpa et do ipsum occaecat minim elit eu ut.

Code example

<div class="accordion" data-js-accordion>
  <div class="accordion-item is-active" data-js-accordion-item>
    <button type="button" class="accordion-item__title" data-js-accordion-trigger>
      Nisi incididunt sint aliqua ad ullamco.
      <span class="accordion-item__icon"></span>
    </button>
    <div class="accordion-item__content">Non quis excepteur cupidatat qui enim tempor elit Lorem amet ad ut fugiat quis exercitation. Eiusmod dolore reprehenderit proident enim laboris dolore commodo consectetur nulla velit sit adipisicing aute velit. Duis velit exercitation nisi cillum exercitation aliqua enim pariatur nostrud. Aliqua ex dolore ullamco ut proident quis pariatur fugiat labore ex sint fugiat. Ipsum aliqua est minim culpa et do ipsum occaecat minim elit eu ut.</div>
  </div>
  <div class="accordion-item js-accordion-item is-active" data-js-accordion-item>
    <button type="button" class="accordion-item__title" data-js-accordion-trigger>
      voluptate laborum duis do ex commodo veniam.
      <span class="accordion-item__icon"></span>
    </button>
    <div class="accordion-item__content">Non quis excepteur cupidatat qui enim tempor elit Lorem amet ad ut fugiat quis exercitation. Eiusmod dolore reprehenderit proident enim laboris dolore commodo consectetur nulla velit sit adipisicing aute velit. Duis velit exercitation nisi cillum exercitation aliqua enim pariatur nostrud. Aliqua ex dolore ullamco ut proident quis pariatur fugiat labore ex sint fugiat. Ipsum aliqua est minim culpa et do ipsum occaecat minim elit eu ut.</div>
  </div>
  <div class="accordion-item js-accordion-item is-active" data-js-accordion-item>
    <button type="button" class="accordion-item__title" data-js-accordion-trigger>
      Id consectetur elit veniam.
      <span class="accordion-item__icon"></span>
    </button>
    <div class="accordion-item__content">Non quis excepteur cupidatat qui enim tempor elit Lorem amet ad ut fugiat quis exercitation. Eiusmod dolore reprehenderit proident enim laboris dolore commodo consectetur nulla velit sit adipisicing aute velit. Duis velit exercitation nisi cillum exercitation aliqua enim pariatur nostrud. Aliqua ex dolore ullamco ut proident quis pariatur fugiat labore ex sint fugiat. Ipsum aliqua est minim culpa et do ipsum occaecat minim elit eu ut.</div>
  </div>
</div>