Skip to content
Moodle Design Systemby Didactika
Moodle 5.3 LTS
v0.1
EN
Bootstrap components
Didactika theme v0.1

Accordion and collapse

Sections that open and close in place, to keep a long page short.

An accordion stacks sections of which one is open at a time; collapse shows or hides one block. Use them for content that most people do not need all at once.

When to use it

Use it

  • Short, specific headings: they are what people scan.
  • Open the section most people need first.
  • Use collapse for optional details (“Show more”).

Don't

  • Hide content the user needs to finish the task.
  • Nest accordions.
  • Use an accordion where tabs would show the views side by side.

Anatomy

A group (accordion) of items (accordion-item), each with a header button (accordion-button) and a panel (accordion-collapse with accordion-body). A plain collapse is a button that shows or hides a collapse block.

Variants and states

Accordion

Natural numbers, integers and the number line. Four activities.

Linear and quadratic functions, with graphs. Six activities.

Solving linear systems. Five activities and a final quiz.
Collapse
Extra information that most people do not need: opening dates, the enrolment method and the group mode of the course.

Combinations

Combination Use it for
Accordion × one open Sections of which one is open at a time (data-bs-parent); the first open by default.
Collapse × details A button that shows more (“Show more details”); it says what it will show.
Accordion × card Inside a card or a page section, never inside another accordion.

What Didactika changes and why

What we changed Why it helps
The open header is tinted and its text in the primary tone It is clear which section is open without relying on the arrow alone.
The arrow turns with a short animation The user sees the section answer the click.
The panel opens with a height transition The page below moves smoothly instead of jumping.

Classes

Class What it does
accordion, accordion-item, accordion-button, accordion-bodyaccordion, card, card-header, card-body The structure of the accordion
collapse, show A block that can be hidden; show is open
data-bs-toggle="collapse", data-bs-target What opens it
data-bs-parent Closes the others when one opens

In this version

Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable. It has its own component, accordion.

Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. There is no accordion component: it is built with cards and collapse.

Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. There is no accordion component: it is built with cards and collapse.

Accessibility

  • The header is a button with aria-expanded and aria-controls.
  • Enter and Space open and close; Tab moves between headers.
  • The heading level fits the page: wrap the button in h2/h3.