- Where to find it
- On the composer’s palette, labelled Accordion. Drag it onto the canvas to add one.
- Its settings
- 6 of them, in the “Selected Component” section of the Modify drawer.
- Provided by
- RuleCMS, in
@rulecms/source-components-react. Available to every team.
In plain English
The Accordion component puts one collapsible row on the page. It has two halves: a Summary, which is the line always on show, and a Detail, which is what appears when a reader opens it. Closed, it takes up a single row; open, it takes up as much room as the detail needs.
The two halves are deliberately named for what they are rather than for one use of them. An FAQ is the obvious case — the question is the summary and the answer is the detail — but the same component is the right one for a long set of terms nobody wants scrolling past them, or a "show more" under a short description.
Opening and closing is the browser's own behaviour, not something the page has to load code to do. It works before any script arrives, it works if scripts fail, keyboard and screen readers already know what it is, and the detail is in the page even while it is closed — so a search engine indexes it and the browser's Find on this page can open it to show you a match.
One component is one row. A stack of them — the usual FAQ — is several accordions in a column, which also means each one opens and closes on its own rather than snapping the previous one shut.
When you would use it
- An FAQ, one accordion per question.
- Terms, specifications, or small print that only some readers want to read.
- A "show more" for a description that would otherwise dominate the page.
- Sections of a long page that most readers only want one of.
Its settings
These are the settings this component offers, in the order the Modify drawer lists them. Each has its own page.
| Setting | Label in the drawer | What it does |
|---|---|---|
| Summary | Summary | The line a reader sees while the accordion is closed, and clicks to open it. |
| Detail | Detail | What the summary expands to — one paragraph per line of text. |
| Open by Default | Open by Default | Whether the detail is already expanded when the page loads. |
| Summary Heading Level | Summary Heading Level | Whether the summary also counts as a heading in the page outline, and at which level. |
| Links | Links | The web addresses that words inside the detail point at. |
| Class Names & Styles | Class Names & Styles | A free-form way to colour or highlight a few words inside the detail, using class names or CSS you type yourself. |
Watch out for
- Do not collapse anything a reader needs in order to act. A price, a deadline or a required step behind a click is a step most people never take.
- The Summary is one line and shows link markers as plain text, on purpose — a link there would fight with the click that opens the row. Links belong in the Detail.
- Spacing, colour, and font are column settings, not accordion settings, and the arrow beside the summary is drawn by the browser.
- Leave Summary Heading Level at none unless these summaries really are the structure of the page.
- Search engines can read the collapsed text, but this component does not add the special FAQ markup some search results use. If you need that, it belongs on the page as a whole, not on each accordion.
Where to go next
- All RuleCMS components
- Attribute Reference — the column and row settings that shape how this component sits on the page: spacing, size, colour, and typography.
- The Composer — the editing surface it lives in.