Accordions

Overview

Accordions are components that expand and collapse to reveal or hide content. They are particularly useful for organizing and presenting large amounts of information in a compact, easily navigable format. Accordions allow users to quickly scan through section headers and expand only the content they're interested in, making them ideal for FAQs, product descriptions, or any scenario where you want to present information in digestible chunks without overwhelming the user with a long page of text.

In the FAO Design System, accordions are designed to be intuitive and accessible, providing a seamless user experience across different devices and screen sizes. They can be customized to match your site's visual style while maintaining consistency in behavior and accessibility features.

Accessibility

Be sure to add aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies.

If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded="false". If you've set the collapsible element to be open by default using the show class, set aria-expanded="true" on the control instead.

The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element's HTML element is not a button, the attribute role="button" should be added to the element.

If your control element is targeting a single collapsible element - i.e. the data-target attribute is pointing to an id selector - you should add the aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.

Usage

To properly achieve the accordion style, be sure to use .accordion as a wrapper.

The collapse component utilizes a few classes to handle the heavy lifting:

• .collapse hides the content
• .collapse.show shows the content
• .collapsing is added when the transition starts, and removed when it finishes

Click the accordions below to expand/collapse the accordion content.