gog-collapsible

Collapsible

A headless expand/collapse primitive — inline, not a portal. It owns no markup of its own: project any element as the trigger with gogCollapsibleTrigger and any element as the panel with gogCollapsibleContent.

Overview

Import the component and its two directives.

import {
  CollapsibleComponent,
  GogCollapsibleTriggerDirective,
  GogCollapsibleContentDirective,
} from '@guildofgleks/ui';

@Component({
  // ...
  imports: [CollapsibleComponent, GogCollapsibleTriggerDirective, GogCollapsibleContentDirective],
})

A trigger and a panel, both projected in — [(open)] is two-way bindable:

<gog-collapsible [(open)]="open">
  <button type="button" gogCollapsibleTrigger>
    {{ open() ? 'Hide details' : 'Show details' }}
  </button>
  <p gogCollapsibleContent>Ships within 2 business days via standard courier.</p>
</gog-collapsible>

Open: false

Examples

Custom trigger element

The trigger's markup is entirely yours — here a whole header row rather than anything that looks like a button. Keep the directive on a natively focusable element, though: gogCollapsibleTrigger wires (click) and the ARIA attributes and nothing else, so on a <div> the trigger would have no tab stop and no keyboard activation.

<gog-collapsible [(open)]="open">
  <button type="button" class="card-header" gogCollapsibleTrigger>
    <span>Order #4471</span>
    <gog-icon [name]="open() ? 'chevron-up' : 'chevron-down'" />
  </button>
  <div gogCollapsibleContent class="card-body">
    <p>3 items — shipped Aug 4, arriving Aug 6.</p>
  </div>
</gog-collapsible>

Disabled

disabled blocks the trigger's click handler and sets aria-disabled — a programmatic [open] write still works.

<gog-collapsible [(open)]="open" [disabled]="true">
  <button type="button" gogCollapsibleTrigger>Unavailable section</button>
  <p gogCollapsibleContent>You should never see this — the trigger is inert.</p>
</gog-collapsible>

Controlled from outside

No gogCollapsibleTrigger anywhere — external buttons drive [(open)] directly.

<gog-button (gogClick)="open.set(true)">Open</gog-button>
<gog-button (gogClick)="open.set(false)">Close</gog-button>

<gog-collapsible [(open)]="open">
  <p gogCollapsibleContent>No gogCollapsibleTrigger anywhere — [open] is driven entirely from outside.</p>
</gog-collapsible>

Independent FAQ list

Each row owns its own open state in an array — unlike gog-accordion, nothing here closes a sibling when one opens.

@for (item of faqItems(); track item.id) {
  <gog-collapsible [open]="item.open" (openChange)="setFaqOpen(item.id, $event)">
    <button type="button" gogCollapsibleTrigger>{{ item.question }}</button>
    <p gogCollapsibleContent>{{ item.answer }}</p>
  </gog-collapsible>
}

Close when focus leaves

collapseOnFocusOut closes the panel once focus leaves both the trigger and the content — Tab past the last field inside, or click elsewhere on the page. It is off by default: an FAQ list or a settings section read top to bottom wants the panel to stay open regardless of where focus goes next.

<gog-collapsible [(open)]="open" [collapseOnFocusOut]="true">
  <button type="button" gogCollapsibleTrigger>Filters</button>
  <div gogCollapsibleContent>
    <p>Tab forward from here and the panel closes behind you.</p>
    <gog-button variant="outline">A focusable control</gog-button>
  </div>
</gog-collapsible>

API Reference

gog-collapsible — Inputs

Name	Type	Default	Description
`open`	`boolean (model)`	`false`	Two-way bindable open state via [(open)]. Bind it directly to drive the panel from outside — no trigger required.
`disabled`	`boolean`	`false`	Blocks toggle() and the trigger's click handler. Programmatic [open] writes still work.
`collapseOnFocusOut`	`boolean`	`false`	Closes the panel once focus leaves both the trigger and the content — Tabbing past the last focusable element inside, or a click landing elsewhere on the page. Off by default, since plenty of consumers (an FAQ list, a settings section read top to bottom) want the panel to stay open regardless of where focus goes next.

Directives

Name	Selector	Description
`GogCollapsibleTriggerDirective`	`[gogCollapsibleTrigger]`	Marks the element that toggles the collapsible on click — any clickable element, not just a <button>. Wires aria-expanded, aria-controls and (when disabled) aria-disabled onto whatever it's placed on.
`GogCollapsibleContentDirective`	`[gogCollapsibleContent]`	Marks the element the collapsible shows and hides. Wires id, aria-hidden and inert onto whatever it's placed on — that element owns its own markup and layout.

Styling Tokens

The component itself renders no box — gogCollapsibleTrigger and gogCollapsibleContent style the elements you project, via global .gog-collapsible__* classes rather than a scoped stylesheet, since that content sits outside gog-collapsible's own view. See the Theming guide for the full token-layering model.

Token	Description
`--gog-collapsible-transition-duration`	Expand/collapse animation timing.
`--gog-collapsible-max-height`	Height an open panel transitions toward. Defaults to max-content, so a panel is as tall as its content and never truncates it. Set a length to cap one deliberately — the panel is overflow: hidden, so a cap clips rather than scrolls.
`--gog-collapsible-disabled-opacity`	Opacity applied to a disabled trigger.