Skip to content
v1.0
Components

Accordion

Stacked disclosures for a rulebook \u2014 a reader opens two and compares them. Each item owns its own open state, because making them exclusive would be answering a question the reader is entitled to answer.

Anatomy

Code 
<GdAccordion>
  <GdAccordionItem v-model="setbacks" title="Setbacks & siting">
    1.5 m to side and rear boundaries, 6 m to the primary street frontage.
  </GdAccordionItem>
  <GdAccordionItem v-model="heights" title="Height limits">
    8.5 m and two storeys, unless the height overlay maps this lot higher.
  </GdAccordionItem>
</GdAccordion>

One on its own

A single expander is GdAccordionItem with nothing stacked under it. There is no separate disclosure component, because there is nothing left for one to do: the item already owns its button, its aria-expanded, its v-model and its findable body. GdAccordion is only the frame around a stack — a border, a radius and the hairline between items.

One item, same component. Keep the GdAccordion wrapper for the framed look; drop it and the expander sits flush in whatever surface it is on.
Code 
<GdAccordion>
  <GdAccordionItem v-model="open" title="What counts as a minor change?">
    A change that does not alter the approved use, increase GFA, or breach a setback.
  </GdAccordionItem>
</GdAccordion>

Not exclusive, on purpose

Each item carries its own v-model. The group does not close one when another opens, because the case this exists for is comparison: a planner reading setbacks against height limits needs both on screen, and a component that shuts one to show the other has decided that for them.

  • Reach for it for a rulebook, where a reader opens two things and compares them.
  • If only one thing may be open at a time, you want tabs. Exclusivity is what a tab set is for, and it says so in its shape.
  • A closed item takes no space at all. Its body keeps hidden="until-found" so the browser's own find can still reach it, and collapses its padding and hairline to nothing so it draws no strip.
  • Never hide something findable behind one. Collapsed content is not searched by the browser's own find, so anything a reader might Ctrl-F for belongs open.

API

GdAccordionItem

Props

PropTypeDefault
titlerequiredstring—

The disclosure's label. Renders a real `<button aria-expanded>`.

modelValuebooleanfalse

`v-model` on open. Each item owns its own — the group does not make them exclusive.

Slots

default

The revealed content, on the subtle ground with a hairline above it.

Navigate

Esc