Skip to main content
Next-Gen. Now.
The Campaign for Concordia
Concordia University
Concordia University

Accordion Panel component

The Accordion Panel component is used to hold content within a panel that can be expanded or collapsed. This is ideal for content that does not need to be exposed all at once and is useful for saving space on a page.

Component(s) you might want to use with this one:

Design options Guidelines Accessibility Examples & use cases Tips Training Support

Design options

Header: This is the text that will show in the accordion panel's header

Header style: Select an option from the drop-down list; the standard is X-Large

Border style: Select an option from the drop-down list; the standard is Default

Name: (Optional) Enter a URL-safe anchor name so that the panel can be linked to with a hashtag, e.g., /content/concordia/en/web/design/component-documentation-2021/accordion.html#panel-2

Number: (Optional) Enter a number and this will add a label with that number to the left of the accordion panel's header. Note: this feature is rarely used but may be useful for numbering steps in a process.

Open by default: If this is checked, the panel appears expanded when the page loads. If not, users must interact with the accordion by clicking on the arrow to expand it.

Guidelines

Accordions should be used for content of “equal weight” that's not required to be seen all at once, for example FAQ, steps in a process or audience-specific information.

An accordion panel is a container that can hold a collection of components so it can display different types of content such as text, images, tables, media, buttons, etc. Components are added into the drop zone which appears as a dashed rectangle inside the accordion panel.

Accessibility

When using the Accordion Panel component, follow accessibility best practices for all of the content inside the accordion (e.g., heading hierarchy, alt-text on images, descriptive link text, etc.).

An accordion can also be useful in cases where adding a chart or infographic to a page is unavoidable — the accordion would hold the data or written description of the graphic in order to provide an accessible text equivalent.

Example

infographic of the six stages of the innovation continuum The innovation continuum (Source: https://www.ic.gc.ca/eic/site/062.nsf/eng/h_00105.html)

  1. People and Skills
  2. Fundamental Research
  3. Applied R&D and Partnership
  4. Commercialization and Start-ups
  5. Scale-up and Going Global
  6. Ease of Doing Business

Examples & use cases

WYSIWYG component

This is a WYSIWYG component inside accordion panel #1. It contains an H4-level heading and some text in the standard X-Large Text style. We use H4 in order to follow the proper heading hierarchy after the H2 section header “Examples & use cases” and the H3 Accordion panel header “Accordion panel #1 — text and image.”

Grumpy Cat

Image & Text component

Accordion panel #1 also contains:

  • an Image & Text component;
  • another H3-level heading;
  • some X-Large Text; and
  • our favourite Grumpy Cat.

Collapse the panel to hide Grumpy Cat.

Table component
Table row 000 0.0% $0.00
Table row 000 0.0% $0.00
Table row 000 0.0% $0.00
Table row 000 0.0% $0.00

Accordion panel #3 contains a Button component. As well, Border style: Dark has been selected for this accordion panel that is positioned inside a Grid Container with a light grey background colour.

Note: In this example, only one panel in this group of panels has a border applied for illustrative purposes. In practice, all the panels in a group of panels should have the same styling for consistency.

Call to action

In accordion panel #4, Border style: None has been selected. This accordion is positioned inside a Grid Container with a tinted background colour.

Note: In this example, only one panel in this group of panels has been styled with no border against a coloured grid for illustrative purposes. In practice, all the panels belonging to a group of panels should have the same styling for consistency.

Dos

  • Do ensure that the header of the accordion panel is clear and meaningful so that users have an idea of what to expect if they choose to expand it.
  • Do use the standard font style X-Large Text for the accordion panel header and any text within the accordion.
  • Do use accordion panels to present parallel content paths which makes it easier for readers to decide which path to take, e.g., one accordion panel per audience wherein each holds registration instructions specific to that audience (undergraduate students, graduate students, continuing education students).
  • Do use accordions for FAQ (unless there are fewer than five and/or answers are too short to merit hiding, e.g., one line).

Don'ts

  • Don't hide important information inside an accordion.
  • Don't ‘nest’ an accordion inside another accordion; hiding content within multiple layers leads to a poor user experience.
  • Don't use a single accordion panel on a page; accordion panels are meant to be used in multiples — like an accordion!
  • Don't configure multiple accordion panels to appear open by default; this defeats the purpose of the accordion which is to condense the content on a page.
  • Don't use accordion panels if there isn't much content to collapse within each one; keep in mind the ‘interaction cost’ of users having to click for the information.
  • Don't use an accordion in a narrow space like the sidebar or in a multi-column layout.

Helpful tips & "gotchas"

  • It may not be obvious to the eye without inspecting the element in the source code, but the header of the accordion panel is actually an H3 heading. For accessibility compliance, subheadings within the accordion should follow in order, starting with H4.
  • To save time, set up the first accordion panel by adding any required component(s) to it, then copy-paste the whole panel to create the next one where you will only have to overwrite the content — an easy shortcut to repeat as many times as needed.

Training

The Accordion Panel component is covered in the Advanced training course.

Need support?

The Web team is here to help.

Contact us

© Concordia University