Proximus design system
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 commonly used to reduce the need to scroll when presenting multiple contents on a single page.

last modified: 19/08/2022 10:20:10

Types

  1. 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.
  2. Panel accordion
    Same than the standard accordion with more prominent look and feel. The addition of an icon offers some more context if needed.
  3. 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

  1. Collapsed state
    Basic state of a branch, displaying only its label (and icon) and chevron pointing to the bottom.
  2. Hover state
    State visible when the cursor hovers the label and chevron. They are displayed in another color. Cursor becomes a pointer.
  3. 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.
  4. 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

  1. Branch
    Branch is the full element with label, chevron, separator and content.
  2. Label
    Allows the users to get the key details about the underlying content of the accordion branch.
  3. Chevron
    Informs the user about the state of the accordion. Pointing down, the content is collapsed. Pointing up, the content is expanded.
  4. Content
    When opened, the item shows its content.
  5. Separator (only for standard accordion)
    Visual indicator between two elements of the accordion.
  6. Icon (only for bordered accordion)
    Add visual context to the label.
  7. Container (only for bordered 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.


Behaviors

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 header area.


Best practices

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


Theming

Epic

A specific version exist for Epic brand.

Epic documentation

last modified: 30/09/2021 11:10:06

Sizes and colors

last modified: 12/07/2022 18:05:04

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!

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).

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).

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.

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).

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).

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.

Negative

Disabled

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

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

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


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 .

Disable

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.


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.


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.


Theming

Epic

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

For disabled version, check panel accordion disabled to have more info about how to and accessibility.

last modified: 03/10/2022 14:25:04

Configuration metadata

Selector: lib-accordion

Class: AccordionComponent

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;
         }