Accordions

Accordions are a javascript feature available thanks to an external library called https://github.com/jonathanlevaillant/a11y-accordion-component a11y-accordion-component.

Demo

Throughout the application the accordions are used, mainly, to show/hide content in tabs or fold/unfold visible texts.

Content of the panel 0

Content of the panel 1

Content of the panel 2

Usage

An accordion requires at least three elements

1. A wrapper div, with the data-attribute data-component="accordion", over all the available triggers and panels.

2. A trigger element, user actionable (as a button), pointing to the collapsable element through data-controls="panel", where panel is the id of the panel.

3. A hideable element, whose id matches the data-controls value the trigger refers to.

Source code on GitHub decidim-core/app/packs/src/decidim/a11y.js


      <div data-component="accordion" id="example-accordion">
  <button id="trigger" data-controls="panel">
    Trigger
  </button>

  <div id="panel" aria-hidden="true">
    Panel
  </div>
</div>