Layout & navigation

AppAccordion

Collapsible panes — an FAQ list, grouped settings, a “more detail” disclosure.

<app-accordion><app-accordion-item title="…">…</app-accordion-item></app-accordion>

<app-accordion> hides detail until it is asked for. Reach for it when a page has several self-contained blocks a reader will want one of — an FAQ list, grouped settings, per-section notes on a long form.

Height animates through grid-template-rows: 0fr → 1fr, so a pane opens to its natural height with no measuring and no max-height guess that clips long content. The React <AppAccordion> renders the identical markup.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the panes above it.

Every zone on the site, scored against the current IEC 62305-2 methodology.
Yes — a revision supersedes the previous version and keeps the original in history.
PDF for sign-off and XLSX for the underlying zone data.
<app-accordion>
    <app-accordion-item title="What does a risk assessment cover?">…</app-accordion-item>
    <app-accordion-item title="Can I revise a report after it is issued?">…</app-accordion-item>
    <app-accordion-item title="What formats can I export?">…</app-accordion-item>
</app-accordion>
Only the first seeded open item wins unless multipleSeed more than one item with open="true" while multiple is off and only the first is honoured — the panes are mutually exclusive on first render, same as after a click.

Basic

One pane open at a time — opening a second closes the first. This is the default, and the right one for an FAQ: it keeps the list scannable.

An FAQ list
Each item is a title and its content. Click a question to reveal the answer.
Every zone on the site, scored against the current IEC 62305-2 methodology.
Yes — a revision supersedes the previous version and keeps the original in history.
PDF for sign-off and XLSX for the underlying zone data.
Show code 
<app-accordion>
    <app-accordion-item title="What does a risk assessment cover?">Every zone on the site…</app-accordion-item>
    <app-accordion-item title="Can I revise a report after it is issued?">Yes — a revision…</app-accordion-item>
</app-accordion>
Closed panes stay in the DOMA collapsed pane is still rendered — the row animates to 0fr. That is what makes the open transition smooth, and it means in-page search (Ctrl+F) finds text inside a closed pane. Don't put a heavy component inside dozens of panes expecting it to be unmounted.

More than one open

Set multiple when the panes are independent and a reader may want to compare two of them side by side — grouped settings rather than a list of questions.

Independent panes
Opening one leaves the others as they were.
Choose which events email you.
Your logo and accent colour.
How long reports are kept.
Show code 
<app-accordion multiple="true">…</app-accordion>

Starting expanded

Mark an item open to have it expanded on first render — useful when one pane is the common case and the rest are exceptions.

First pane open
With multiple off, only the first open item expands.
Every zone on the site, scored against the current IEC 62305-2 methodology.
Yes — a revision supersedes the previous version.
Show code 
<app-accordion-item title="…" open="true">…</app-accordion-item>

When to use

Use it when

  • A page has several self-contained blocks and a reader wants one of them.
  • The content is secondary — reference detail, an FAQ answer, an advanced setting.
  • Collapsing keeps a long page scannable rather than hiding something essential.

Reach for something else when

  • The sections are alternative views of the same thing. → app-tabs
  • The content needs full attention before continuing. → app-modal
  • Every pane will be read anyway — collapsing just adds clicks. → plain sections
  • It is one short hint on a field label. → app-info-tip

Best practices

Do
Yes.
Write the title as the question or the thing the reader is looking for. They are scanning titles, not content.
Don't
Yes.
“More information” says nothing about what is inside, so the reader has to open every pane to find what they want.

Every option

The whole surface of the component, one cell per value — including the branch a normal example never shows: an empty list, keyless items, and rich content.

multiple

multiple="false" — default, mutually exclusive
Every zone on the site, scored against the current IEC 62305-2 methodology.
Yes — a revision supersedes the previous version and keeps the original in history.
PDF for sign-off and XLSX for the underlying zone data.
multiple="true" — independent panes
Every zone on the site, scored against the current IEC 62305-2 methodology.
Yes — a revision supersedes the previous version and keeps the original in history.
PDF for sign-off and XLSX for the underlying zone data.

open (initial state)

(no item open)
Every zone on the site, scored against the current IEC 62305-2 methodology.
Yes — a revision supersedes the previous version and keeps the original in history.
open="true" on the first item
Every zone on the site, scored against the current IEC 62305-2 methodology.
Yes — a revision supersedes the previous version and keeps the original in history.
two items open, multiple="false" — only the first is honoured
Every zone on the site, scored against the current IEC 62305-2 methodology.
Yes — a revision supersedes the previous version and keeps the original in history.
three items, only the third open
1
2
3

id

(no id) — a unique id is generated
Every zone on the site, scored against the current IEC 62305-2 methodology.
id="pricing-faq" — a stable, deep-linkable prefix
Every zone on the site, scored against the current IEC 62305-2 methodology.

content

long content — no max-height clip
It depends on the number of zones and the complexity of the roof and bonding network, but a typical single-building commercial site takes one working day for the site visit, plus report turnaround. Multi-building campuses or sites with restricted access windows can take several days of on-site work before the report is drafted, reviewed, and issued for sign-off.
rich markup in content — title stays plain text (no React-node equivalent)
Email support@example.com — Razor has no rich-title equivalent (title is plain text there); content, however, can carry markup on both surfaces.

empty

(no app-accordion-item children)

Attributes

AttributeTypeDefaultDescription
multipleboolfalseAllow more than one pane open at a time.
idstringgeneratedPrefix for the pane ids. Set it when a pane needs a stable anchor to deep-link to.
classstring—Extra classes on the list root; matches React's className.

<app-accordion-item> takes title (the always-visible row, plain text — no rich-node equivalent) and open (start expanded); its inner markup is the revealed body and may contain HTML.