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.

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)].

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.

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 / -hover-ring`	Header hover background and focus ring.
`--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`	Header padding and font size, per size step (xsm/sm/md/lg/slg).