Interaction component
Accordion
Progressive disclosure of secondary detail that benefits from being collapsed by default.
Live preview
Education (Accreditation of Non-State Schools) Act 2017 and Regulation
Requires schools to maintain and actively implement written child protection processes…
Light background shown; verify against a tinted or dark surface where the component is used that way in course.
Use when / avoid when
Use when
- Secondary detail the learner may want but doesn't need to see immediately — e.g. individual pieces of legislation within a set.
Avoid when
- Core obligations the learner must see immediately — never hide essential compliance information behind an interaction.
Anatomy
- Wrapper (.isq-accordion)
- Native /
- Label (.isq-accordion__label)
- Chevron (.isq-accordion__chevron)
- Content (.isq-accordion__content)
States
Responsive behaviour
Padding and alignment reduce on mobile; touch target remains adequate.
Accessibility
- Uses native /
so semantics and keyboard behaviour are preserved without JavaScript.
- Chevron is aria-hidden; state is exposed natively via the open attribute.
Implementation
Type: custom-html
Dependencies: Production CSS only — no JavaScript required; native provides the interaction.
Code
HTML
Education (Accreditation of Non-State Schools) Act 2017 and Regulation
Requires schools to maintain and actively implement written child protection processes…
Classes used: .isq-accordion, .isq-accordion__label, .isq-accordion__chevron, .isq-accordion__content
Governance metadata
| Owner | Design and development steward |
|---|---|
| Status | Core |
| Version introduced | 1.0.0 |
| Last reviewed | 2026-07 |
| Known limitations | None recorded. |