gog-accordion

Accordion

An expandable content panel with single-open and multi-open modes, content projection for headers, chevrons and bodies, and a loading skeleton state.

Overview

Import the component and drop it into a template.

import { AccordionComponent } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [AccordionComponent],
})

Basic usage — three sections, one disabled, the first expanded on load. The body comes from the gogAccordionContent template, which receives the item back.

Ships within 2 business days via standard courier.

<gog-accordion [items]="items" [expandFirst]="true" (gogToggle)="onToggle($event)">
  <ng-template gogAccordionContent let-item>
    <p>{{ item.body }}</p>
  </ng-template>
</gog-accordion>

No item toggled yet.

Examples

Sizes

Every size, from xsm through slg. The three smallest look closer together than the gap between lg and slg, and that is correct: they all label at --gog-text-xs, and since 21.11.0 the chevron is a ratio of the header's own type rather than a px ladder of its own — so it no longer manufactures a difference the type does not have.

xsm

Sample content for the size comparison.

slg

Sample content for the size comparison.

<gog-accordion [items]="sizeDemoItems" [size]="sizeOption" [expandFirst]="true">
  <ng-template gogAccordionContent let-item>
    <p>{{ item.body }}</p>
  </ng-template>
</gog-accordion>

Single vs. multi-open

By default opening one item closes the rest. multi lifts that restriction.

<gog-button (gogClick)="toggleMulti()">
  Multi-open: {{ multi() ? 'on' : 'off' }}
</gog-button>

<gog-accordion [items]="multiItems" [multi]="multi()">
  <ng-template gogAccordionContent let-item>
    <p>{{ item.body }}</p>
  </ng-template>
</gog-accordion>

Disabled item

A disabled item's header is non-interactive and skipped by keyboard navigation — see "Warranty" above.

<gog-accordion [items]="items">
  <!-- items[2].disabled === true -->
  <ng-template gogAccordionContent let-item>
    <p>{{ item.body }}</p>
  </ng-template>
</gog-accordion>

Custom header & chevron

gogAccordionHeader and gogAccordionChevron both receive the item plus the current open state, so either can react to it.

<gog-accordion [items]="statusItems">
  <ng-template gogAccordionHeader let-item let-open="open">
    <gog-icon [name]="item.icon" />
    <span>{{ item.title }}</span>
    <span>{{ open ? 'Expanded' : item.subtitle }}</span>
  </ng-template>

  <ng-template gogAccordionChevron let-open="open">
    <gog-icon [name]="open ? 'chevron-up' : 'chevron-down'" />
  </ng-template>

  <ng-template gogAccordionContent let-item>
    <p>{{ item.body }}</p>
  </ng-template>
</gog-accordion>

Heading level

headingLevel wraps each header in role="heading" at that aria-level, so screen-reader users can jump straight to a section. Leave it unset when the accordion isn't part of the page outline (e.g. nested in a card).

<gog-accordion [items]="items" [headingLevel]="3">
  <ng-template gogAccordionContent let-item>
    <p>{{ item.body }}</p>
  </ng-template>
</gog-accordion>

Loading skeleton

For when the item list itself hasn't arrived yet — every item is replaced by a shimmering placeholder row.

<gog-button (gogClick)="toggleLoading()">Toggle loading</gog-button>

<gog-accordion [items]="items" [loading]="isAccordionLoading()" />

Controlled open state

openIds is a model, so it can be driven from outside the component — here two buttons expand or collapse every item.

<gog-button (gogClick)="expandAll()">Expand all</gog-button>
<gog-button (gogClick)="collapseAll()">Collapse all</gog-button>

<gog-accordion [items]="multiItems" [multi]="true" [(openIds)]="openIds">
  <ng-template gogAccordionContent let-item>
    <p>{{ item.body }}</p>
  </ng-template>
</gog-accordion>

API Reference

Inputs

Name	Type	Default	Description
`items`	`GogAccordionItem[]`	`[]`	The sections to render. Each item needs an id and title, and may set disabled.
`size`	`'xsm' \| 'sm' \| 'md' \| 'lg' \| 'slg'`	`'lg'`	Header/body padding, font size, and chevron size.
`expandFirst`	`boolean`	`false`	Opens the first item once items becomes non-empty. Fires only that one time — closing everything by hand does not reopen it, even if items is later replaced.
`multi`	`boolean`	`false`	Allows more than one item open at once. Off by default: opening an item closes the rest.
`loading`	`boolean`	`false`	Renders a shimmering skeleton row per item instead of real headers — for when the item list itself hasn't arrived yet.
`skeletonCount`	`number`	`3`	How many skeleton rows to render while loading is true and items is still empty — the common case of "the list itself hasn't arrived yet", where there is no item count to derive a row count from. Ignored once items has entries: then one skeleton row is rendered per item, so the placeholder matches the eventual shape.
`showChevron`	`boolean`	`true`	Toggles the trailing chevron indicator.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6 \| undefined`	`undefined`	Wraps each header in role="heading" at this aria-level, so screen readers can navigate sections by heading. Leave unset when the accordion is not part of the document outline.
`openIds`	`ReadonlySet<string \| number>`	`new Set()`	Two-way bindable set of open item ids — drive the accordion externally with [(openIds)].
`ripple`21.6.1	`boolean \| undefined`	`undefined`	Press ripple on each item header. Unset, falls back to GOG_CONFIG.ripple.enabled, which is off by default; setting it here wins over the app-wide value in both directions.

Outputs

Name	Type	Description
`gogToggle`	`EventEmitter<GogAccordionToggleEvent>`	Emitted with the item and its new open state whenever a header is toggled.

Content projection

Three structural directives, applied to <ng-template> elements inside <gog-accordion>, override parts of the default rendering.

Directive	Template context	Description
`gogAccordionHeader`	`let-item; let-open="open"`	Replaces the header content (everything left of the chevron). Falls back to item.title.
`gogAccordionChevron`	`let-item; let-open="open"`	Replaces the trailing chevron icon. Ignored when showChevron is false.
`gogAccordionContent`	`let-item`	The panel body, rendered only for the currently mounted items.

Global Configuration

Set any of these once with provideGogConfig() instead of repeating them on every instance — an instance's own input still wins when it sets one itself. See Global Configuration for the full reference.

GOG_CONFIG.ripple.enabled

This site is not on the default here. The library ships ripple.enabled as false; these docs set it to true app-wide so the demos above actually show the press feedback. In a fresh app you get no ripple until you ask for one — the droplet button in the header switches this site between the two, and it is on right now.

Styling Tokens

Every CSS custom property the accordion paints with. Override any of them — on a single instance, a subtree, or a theme — to restyle it. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.

Token	Description
`--gog-accordion-border-color / -width / -style`	Header border.
`--gog-accordion-text-color / -accent-color`	Text and accent color.
`--gog-accordion-hover-bg`	Header hover background. --gog-accordion-hover-ring was removed in 21.13.0: the hover never drew a ring, so nothing read it.
`--gog-accordion-focus-ring-color / -width`	The keyboard focus ring, and its own colour since 21.12.0. The header’s :focus-visible outline used to read --gog-accordion-hover-ring, so a hover-weight colour was doing focus duty and missed 3:1 in all eleven themes. Hover and focus are different signals and now carry different colours.
`--gog-accordion-press-bg`	Header press background, one step past its own hover.
`--gog-accordion-radius / -body-radius`	Corner radius for the header and body.
`--gog-accordion-header-bg / -body-bg`	Header and body background.
`--gog-accordion-header-gap`	Gap between chevron and title.
`--gog-accordion-transition-duration / -body-transition-duration / -chevron-transition-duration`	Expand/collapse animation timing.
`--gog-accordion-{size}-padding-y / -x / -font-size / -chevron-size / -chevron-font-size`	Header padding and font size, per size step (xsm/sm/md/lg/slg). The chevron is a ratio of the header’s own type since 21.11.0 — 1.4em of box, 1em of glyph, one value at every size — so the three smallest sizes, which all label at --gog-text-xs, now carry identical chevrons. Making it a ratio also surfaced a glyph that had been overflowing its own box at every size.