Interaction component

Accordion

Progressive disclosure of secondary detail that benefits from being collapsed by default.

core Current implementation: ISQ Rise Version introduced: 1.0.0 Platforms: Rise Owner: Design and development steward

ISQ Rise implementation preview

Rendered with the governed ISQ production Rise CSS

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.

Current implementation

Theme and platform: ISQ · Articulate Rise

Implementation type: custom-html

The classes below belong to the ISQ implementation namespace. A future theme may implement the same component contract with different tokens and class names.

Dependencies: Production CSS only — no JavaScript required; native

provides the interaction.

Code

HTML

<div class="isq-accordion">
  <details>
    <summary>
      <span class="isq-accordion__label">Education (Accreditation of Non-State Schools) Act 2017 and Regulation</span>
      <span class="isq-accordion__chevron" aria-hidden="true">+</span>
    </summary>
    <div class="isq-accordion__content">
      <p class="isq-body">Requires schools to maintain and actively implement written child protection processes…</p>
    </div>
  </details>
</div>

Classes used: .isq-accordion, .isq-accordion__label, .isq-accordion__chevron, .isq-accordion__content

ISQ production stylesheet reference →

Related items

Related patterns: Legislation

Related components: Legislation panel Tabs

Governance metadata

Owner	Design and development steward
Status	Core
Version introduced	1.0.0
Last reviewed	2026-07
Known limitations	None recorded.