Important information:

Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Accordion

Accordions are interactive UI elements that expand and collapse content sections upon user interaction, conserving space, and organizing information hierarchically for improved readability and navigation within pages.

last modified: 19/12/2022 16:00:05

Types

Standard accordion
An accordion is a vertically stacked set of interactive branches. Each branch works as controls that enable users to reveal or hide their associated content. The label gives the user a high level overview of the content allowing the user to decide which sections to read. Users can only open one branch at a time.
Panel accordion
Same than the standard accordion with more prominent look and feel. The addition of an icon offers some more context if needed.
Single accordion
Only one single branch allows users to reveal or hide a content. There is not real high level overview in this case. The single accordion is used after a sequence of elements and allows to show and hide other elements of the same type.
This type of accordion isn't used to show/hide text paragraph.

States

Collapsed state
Basic state of a branch, displaying only its label (and icon) and chevron pointing to the bottom.
Hover state
State visible when the cursor hovers the label and chevron. They are displayed in another color. Cursor becomes a pointer.
Opened state
State visible when clicked. The branch opens, allowing the content inside to be displayed. The look of the label changes in order for the user to clearly identify which item in the list is openned. Also, the chevron is changin its direction to point to the top.
Disabled state
State visible if the branch is not clickable. All elements are displayed but they are greyed out in order to signify the change of state. This state is not available for the standard accordion.

Anatomy

Branch
Branch is the full element with label, chevron, separator and content.
Label
Allows the users to get the key details about the underlying content of the accordion branch.
Chevron
Informs the user about the state of the accordion. Pointing down, the content is collapsed. Pointing up, the content is expanded.
Content
When opened, the item shows its content.
Separator (only for standard accordion)
Visual indicator between two elements of the accordion.
Icon (only for panel accordion)
Add visual context to the label.
Container (only for panel accordion)
A container is displayed around the text label with a solid color.

Panel accordion pyjama

If you need to use several accordion panels underneath each other, please take the pyjama version. In this case, it's considered a list and the different states are visually different from the default panel accordion. In the pyjama version, the accordion panels are glued together and alternating colours are applied.

Behavior

Collapsed / Opened states

Accordions begin by default in the collapsed state with all content closed. Starting in a collapsed state gives the user a high level overview of the available information.

By default, the user can open one branch at a time. When a new branch is opened, the previous one is closed.

If needed, you can parameter the accordion to allow the user to expand multiple branch at once.

Clickable zone

Users can trigger a state change by clicking on the chevron or clicking anywhere in the label area.

Accordion with external toggle button

Accordions begin by default in the collapsed state with all content closed. The expand/close action can triggered by another button than the branch itself. This option can be used as an anchor to redirect the user to the good branch of the accordion with its content already revealed or an external close button can be added on mobile at the end of the content to close the branch when its content is really long.

Best practices

Don't
Putting an expand/collapse behaviour inside of an accordion item is not considered as a good UX practise.

last modified: 30/09/2021 10:20:04

Sizes and colors

last modified: 09/11/2022 17:05:06

Standard accordion

Accessibility

The clickable expandable title should be a heading. As foundation 5 didn't foresaw it, we add role="heading" aria-level="2" so simulate a heading. In this case, it will be interpreted as <h2> .

aria-level="2" should then be adapted according to its position on the page titles hierarchy!

Accordion 1

Panel 1. The content is not an integral part of the accordion component, it can be replaced by any content (pay attention to light & dark theme rules).

Accordion 2 with a very long text lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, consectetur adipisicing elit.

Panel 2. The content is not an integral part of the accordion component, it can be replaced by any content (pay attention to light & dark theme rules).

Accordion 3

Panel 3. The content is not an integral part of the accordion component, it can be replaced by any content (pay attention to light & dark theme rules).

Negative

To switch it to negative, add rs-accordion-neg to accordion foundation class.

Accordion 1

Panel 1. The content is not an integral part of the accordion component, it can be replaced by any content (pay attention to light & dark theme rules).

Accordion 2 with a very long text lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, consectetur adipisicing elit.

Panel 2. The content is not an integral part of the accordion component, it can be replaced by any content (pay attention to light & dark theme rules).

Accordion 3

Panel 3. The content is not an integral part of the accordion component, it can be replaced by any content (pay attention to light & dark theme rules).

Panel accordion

Accessibility

For accessibility, it's imperative to set the aria-labelledby attribute to indicate the IDs of the elements that label the object. It is used to establish a relationship between components, or groups, and their labels.

role="button" attribute is used to simulate a button. Put it on <a class="rs-accordion-title"> .

aria-expanded attribute is used to tell in screen reader if the accordion is expanded or collapsed. Put it on <a class="rs-accordion-title"> .

aria-controls is used to associate a control with the fields it controls. The fields are identified with an ID

Hover effect

rs-bg-hover is used to trigger a hover effect on the border of the whole div . If you need another hover effect, you can use background hover classes.
If no hover is needed (due to accordion content for example), you can just remove this class.

Clickable title which expands/collapses content

Negative

Clickable title which expands/collapses content

Disabled

To create a disabled accordion, add rs-disabled around (or on the section). This also do the job with negative and theme.

Accessibility

Also add aria-hidden="true" aria-disabled="true" to completely hide the component for screen reader.

To avoid focus and the posibility to use it with keyboard, you also need to add tabindex="-1" on all <a> .

Panel pyjama accordion

To have a pyjama effect wrap your panel accordions inside a <div> with rs-accordion-pyjama . No need to add background color classes on the rs-accordion-panel

Clickable title which expands/collapses content

Negative

To have the negative version, add rs-accordion-pyjama-neg to rs-accordion-pyjama . No need to add background color classes on the rs-accordion-panel

Clickable title which expands/collapses content

Single accordion

Use class rs-accordion-single-container to include button and content with associates classes.

data-expandable should be added on the <button> to enable the open/close.

To open it by default for a specific breakpoint, add data-expanded-breakpoint="large" on the <button> . Value could be for example: "small-only", "medium", "large"...

Accessibility

It's mandatory to set following attributes:

Html element	Attribute	Attribute value	Explanation
<button>	`aria-expanded`	`false` / `true`	Depending wether the accordion should be opened or closed by default. The js allows to toggle between "true and "false".
	`aria-controls`	`ac-XXX`	Refering to the related content of the expanding part to establish a relationship between the button and its expanding content.
	`id`	`ac-XXX`	Button's id prefixed with "ac-" (meaning this id is added for accessibilty needs)
<i>	`aria-hidden`	`true`	Making the screen reader ignore the icon
<div class="rs-accordion-single-content">	`role`	`region`	To allow keyboard navigation on the accordion content
	`id`	`ac-XXX`	Expanding content id prefixed with "ac-" (meaning this id is added for accessibilty needs)
	`aria-labelledby`	`ac-XXX`	Refering to button's id which expands the content to establish a relationship between the button and its expanding content.
	`aria-hidden`	`true` / `false`	Depending wether the expanding content should be expanded or not by default. The js allows to toggle between "true and "false".

Negative

Add this class rs-accordion-single-container-neg to existing div that contains rs-accordion-single-container .

Disabled

Add disabled to button to disabled the single accordion.

Single accordion with dependencies

To allow several accordions opening at the same time, you must add data-expandable-depencies="#ac-ID1, #ac-ID2" on the <button> " specifying the id of other accordion(s) separated by commas, it is possible to apply the opening behaviour on several accordions at the same time.

Show more 1

Show more 2

Show more 3

Accordion with external toggle button

You can trigger the expand of the accordion by another button than his button. In order to do that you have to add data-accordion-toggle attribute to the element with the id of the initial accordion button.

By default it opens the accordion, if you need to close it by the new button, add , false to the attribute.

click me to open the accordion

JavaScript

How to trigger the js

Panel accordion: inception.panelAccordion(EL);
EL is referred to a DOM element containing a child with data-accordion-panel-trigger attribute.

Single accordion: inception.expandable(CONTEXT);
CONTEXT is referred to a DOM element containing a child with data-expandable attribute.

External button: inception.accordion.externalButton(CONTEXT);
CONTEXT is referred to a DOM element with data-accordion-toggle attribute.

last modified: 28/02/2024 15:40:06

Configuration metadata

Selector: ds-accordion

Class: DSAccordionComponent

Use case example

NOT AVAILABLE LIVE PREVIEW

Inputs

Name	Type	Default	Required	Description
id	string	undefined	Yes	Unique id that will be attached to the attributes "name" and "id" on the <input> element and "for" attribute in the <label> element. It is required as you could run into behavioral problems if not provided
accordionStyle	AccordionStyleEnum	AccordionStyleEnum.Standard	No	Panel, Standard, PanelPyjama, Single. The type of accordion you want this to be. See models below.
branches	AccordionBranch[]	undefined	No	It holds the title of the button (head) and the content. If you want a 'Single' accordion with dependencies you add a dependency per branch. Also see models below + some examples.
icon	string	undefined	No	For Panel and PanelPyjama you can specify an icon, it will be added to the element as the value of the class attribute
negative	boolean	false	No	Defines light/dark style of the component

Outputs

Name	Type	Description
blurred	EventEmitter<boolean>	Emits true when opened

Models

        export enum AccordionStyleEnum {
            Panel,
            Standard,
            PanelPyjama,
            Single,
        }

        export interface AccordionBranch {
            title: string;
            content?: string;
            dependency?: string;
         }