Accordion
Use an accordion when you need sections that expand and collapse to save vertical space.
Live demo
The accordion component delivers large amounts of content in a small space through progressive disclosure. The header gives a short overview so people can choose which sections to open.
Accordions can make scanning faster, but they hide content by default. Do not put essential information only inside a collapsed panel.
The accordion component delivers large amounts of content in a small space through progressive disclosure. The header gives a short overview so people can choose which sections to open.
Accordions can make scanning faster, but they hide content by default. Do not put essential information only inside a collapsed panel.
Anatomy
- Header: Contains the section title and is the control for revealing the panel. Authors can add an optional number label on the left.
- Chevron icon: Indicates whether the panel is open or closed.
- Panel (body): The section of content associated with an accordion header. In the authorable Accordion Panel component, this is a parsys so authors can add components.
Replace with collapsed, expanded, and numbered header examples.
Behaviour
- The header button toggles the panel.
- Optional deep links use a panel name so URLs with a hash can open the right section on load.
- Some templates render accordion markup in code (for example program list). In that case, the parent component controls content and structure.
When to use
- To organize related information.
- To reduce scrolling when content is useful, but not essential to read in full.
- When space is limited (for example on mobile or in a side panel).
Use accordions when:
- You need to present users with a choice of content, but only one option applies to their situation.
- You want to include content that applies to most users, but only a few need.
When not to use
- If users are likely to read all content, use a normal page structure with headings instead.
- For essential information that should always be visible.
- In web forms, especially when fields are required.
- Nested inside other accordions or inside Tabs CDS|Tabs.
Content guidelines
Do
- Use short, descriptive header labels that describe what the panel contains.
- Keep header labels in sentence case.
Don't
- Don't use vague labels such as “More” or “Other”.
- Don't put long paragraphs into the header, move details into the panel body.
Best practices
Do
- Use one idea per panel so sections are clearly differentiated.
- Keep the number of panels reasonable so scanning remains fast.
- Use deep linking when you need to land users on one specific panel.
Don't
- Don't open panels by default unless there is a clear reason (for example a deep link to a panel).
- Don't hide required actions or required form fields inside an accordion.
- Don't nest accordions inside other accordions or inside Tabs CDS|Tabs.
Related
| Resource | |
|---|---|
| [[Tabs CDS\ | Tabs]] |
| W3C ARIA Authoring Practices: Accordion | Accessibility pattern guidance. |
| Accordion in Figma | Design reference. |
The accordion uses Bootstrap Collapse behaviour and is styled under #boot .c-accordion. Header typography uses CDS tokens; borders and spacing follow the design system.
Anatomy (visual)
- Wrapper:
.c-accordioncontains one or more.accordionblocks. Each panel is an.accordion-itemwith border, border-radius, and spacing. - Header:
.accordion-headerwith.accordion-button. Authors can add an optional.numberlabel on the left. - Panel body:
.accordion-bodywith padding; can contain headings, images, and other content.
Typography
| Element | Token / value | Where used |
|---|---|---|
| Header (default, large) | font-size: var(--cds-font-size-075) | .accordion-header .accordion-button |
| Header (xlarge) | font-size: var(--cds-font-size-100) | .accordion-header.xlarge .accordion-button |
| Header | font-weight: var(--cds-font-weight-bold) | .accordion-header .accordion-button |
| Section title (inside panel body) | font-size: var(--cds-font-size-075) | .accordion-body .section-title |
| Section title (inside panel body) | font-weight: var(--cds-font-weight-book) | .accordion-body .section-title |
| Header and section title | font-family: var(--cds-font-family-body) | .accordion-header …, .accordion-body .section-title |
| Header and section title | letter-spacing: var(--cds-letter-spacing-body) | .accordion-header …, .accordion-body .section-title |
| Header and section title | line-height: var(--cds-font-line-height-body) | .accordion-header …, .accordion-body .section-title |
Design tokens
| Token | Category | Where used |
|---|---|---|
--cds-font-weight-bold | typography | Accordion header (all header styles). |
--cds-font-size-075 | typography | Default and large header. |
--cds-font-size-100 | typography | X-Large header (and large at 768px+). |
--cds-font-line-height-body | typography | Header line height. |
--cds-font-family-body | typography | Header and body section titles. |
--cds-letter-spacing-body | typography | Header and body section titles. |
--cds-border-radius-container | layout | .accordion-item border radius. |
--bs-accordion-btn-focus-box-shadow | behaviour | Set to unset; focus uses .focus-custom(). |
The chevron SVG fill is #912338 (brand). LESS also uses design variables from dependencies.less such as @color-light-grey, @color-medium-grey, and @color-burgundy.
Variants (style)
- Header style: Default, Large, X-Large (
headerStyle). X-Large uses a fixed colour#2c2c2cand larger font size. - Border style: Default (
border-default), Dark (border-dark), None (border-none). - Chevron position: Default (right). Some templates use
.accordion-button.leftto place the chevron on the left. - Isolated button: Some templates use
.isolated-buttonso the header title can be a link, separate from the toggle.
Interactive states
| Element | State | Token / value | Where used |
|---|---|---|---|
| Header button | Hover | background-color: #F0F0F0 | .accordion-button:hover |
| Header button (expanded) | Expanded | background-color: @color-white | .accordion-button:not(.collapsed) |
| Header button | Focus visible | .focus-custom() | .accordion-button:focus-visible |
Layout and spacing
- Button padding:
1.5remleft and right; on viewports under 768px,1rem 1rem 1rem 1.25rem. Left-aligned button has adjusted padding. .accordion-item:margin-bottom: 0.5rem; border1px solid @color-light-grey..accordion-body:padding: 1rem 1.5rem 1.5rem 1.5rem..number:min-width: 3.75rem(2.5rem under 576px); burgundy colour.
The accordion uses semantic heading levels (H2, H3, or H4) for the header and Bootstrap Collapse behaviour. The button has aria-expanded and aria-controls; the panel has a unique id referenced by aria-controls. Deep linking is supported via an optional anchor and hash-based open on load.
Semantics
- Header is a real heading (
h2,h3, orh4) so the outline and screen readers get correct structure. - One toggle per panel:
<button type="button">withdata-bs-toggle="collapse"anddata-bs-target="#id". No redundantrole="button".aria-expandedis on the button.
Keyboard
- Tab moves focus between accordion buttons and other focusable elements.
- Enter and Space toggle the panel.
Screen reader
- Buttons announce expanded or collapsed state via
aria-expanded. - Panel content is hidden when collapsed and becomes available when expanded.
Focus
- The accordion uses
.focus-custom()on:focus-visiblefor a visible focus indicator.
Testing
| Test | Status |
|---|---|
| Default state (collapsed) | Tested |
| Expanded state | Tested |
| Keyboard navigation (Tab, Enter, Space) | Tested |
| Open by hash on load | Tested |
| Screen reader (button label, expanded state) | Manually tested |
CRXDE Lite query
Use this query in CRXDE Lite to find instances of this component.
/jcr:root/content//*[@sling:resourceType = 'concordia/components/accordion-panel']Technical behaviour
- Clientlibs are loaded via category
apps.concordia.accordion. - On load, if the URL hash matches
a.accordion-hash[name="..."], the corresponding panel is opened via Bootstrap Collapse. - The “isolated button” pattern supports a linked header title alongside the toggle button in some template-driven accordions.
Anatomy (markup)
- Outer:
<div class="accordion [additionalClass]">then<div class="accordion-item [borderStyle]">. Optional<a name="…" class="accordion-hash"></a>for deep linking. - Header:
<h2|h3|h4 class="accordion-header [headerStyle]">containing a<button class="accordion-button …" data-bs-toggle="collapse" data-bs-target="#id" aria-expanded aria-controls>. - Panel:
<div id="instanceId" class="accordion-collapse collapse [show]">then<div class="accordion-body">and a parsys.
Authoring
| Dialog field | Property | Maps to |
|---|---|---|
| Header | ./header | Button label text. |
| Heading level | ./headingLevel | Element h2, h3, or h4. Default is h3. |
| Header style | ./headerStyle | Class on .accordion-header: default, large, xlarge. |
| Border style | ./borderStyle | Class on .accordion-item: border-default, border-dark, border-none. |
| Name | ./name | Optional anchor for deep linking. |
| Number | ./number | Optional label before header text. |
| Open by default | ./panelOpenOnLoad | Adds show and removes collapsed on load when set. |
| CSS class | ./additionalClass | Added to outer div.accordion. |
Instances in the codebase
The accordion pattern (.c-accordion, .accordion-item, .accordion-header, .accordion-collapse, .accordion-body) appears in several places:
| Context | Location | Authorable? | Notes |
|---|---|---|---|
| Accordion Panel | apps/concordia/components/accordion-panel/ |
Yes | Authors add panels to a page and fill header + parsys. Each panel is one component instance. |
| Events list | news-events/events-list/ |
Yes (display option) | Events can be shown as accordion or list. Dialog includes accordion options. |
| List events | news-events/list-events/list-events.jsp |
No (template-driven) | Renders events in a single accordion. |
| Course description | course-description/course-description.html |
No (template-driven) | Renders course descriptions in accordion layout. |
| Student group list | student-group-list/student-group-list.html |
No (template-driven) | Accordion list with accordion-button left collapsed. |
| IT service notifications | it-services/it-service-notifications/it-service-notifications.html |
No (template-driven) | Groups of notifications in accordion layout. |
| Degree program detail | page/concordia/academics/degree-program-detail/content.jsp |
No (template-driven) | Accordion with left chevron and isolated-button pattern. |
| Program list | program-list/program-list.jsp |
No (template-driven) | Uses isolated-button pattern so the title can link independently from the toggle. |
Where the accordion is not authorable, content or structure is driven by the parent component or template. Use the Accordion Panel component when authors need to add and edit accordion panels freely on a page.
Dependencies
| File | Purpose |
|---|---|
apps/concordia/components/accordion-panel/accordion-panel.html | Renders one accordion panel. |
apps/concordia/components/accordion-panel/dialog.xml | Authoring dialog fields. |
etc/designs/concordia/clientlibs/accordion/less/accordion.less | Accordion styles under #boot. |
etc/designs/concordia/clientlibs/accordion/js/accordion.js | Hash-open behaviour and isolated-button click handling. |