Content switcher

Show/hide children based on a state value, sourced either from a URL param or a field on the nearest data record.

Driven by URL

<div gg-switch-query="view">
  <section gg-case="">Pick a view</section>
  <section gg-case="list">List view</section>
  <section gg-case="grid">Grid view</section>
</div>

When ?view=list is present, only the gg-case="list" child is shown.

Driven by a record field

<span gg-switch-field="status">
  <span gg-case="published">Published</span>
  <span gg-case="draft">Draft</span>
  <span gg-case="">Unknown</span>
</span>

The switcher walks up the DOM to find the nearest gg-data / gg-data-list row record, then reads status from that record.

Default state

gg-case="" acts as the default/empty state. It matches when the URL param or field is missing or empty.

For multi-key switches or when you want a default to live on the same element as another case, use gg-case-default as a presence-based modifier:

<div gg-switch-query="sortBy,sortDir">
  <section gg-case-default>Pick a sort order</section>
  <section gg-case="date,asc">Date ↑</section>
  <section gg-case="date,desc">Date ↓</section>
</div>

gg-case-default shows when every comma-separated segment of the state is empty (i.e. all keys are unset or empty). It can be combined with gg-case on the same element to OR a "nothing selected yet" fallback into a normal case:

<div gg-switch-query="view">
  <section gg-case="edit" gg-case-default>Edit pane</section>
  <section gg-case="preview">Preview pane</section>
</div>

Above, the edit pane shows when ?view=edit is present and also when view is absent.

Active marker

The currently visible case also receives a presence-only gg-active attribute, which the engine adds when the case becomes active and removes when it stops matching. This applies to gg-case and gg-case-default alike, so styling and selectors can target the active child without re-deriving the match:

[gg-case][gg-active],
[gg-case-default][gg-active] {
  border-color: currentColor;
}

Multiple values

Both gg-switch-query and gg-switch-field accept comma-separated keys / paths. The state becomes the values joined by commas in the same order, and gg-case matches positionally (AND).

<div gg-switch-query="sortBy,sortDir">
  <button gg-case="date,asc">Date ↑</button>
  <button gg-case="date,desc">Date ↓</button>
  <button gg-case="title,asc">Title ↑</button>
</div>

Inside one position, use | for OR alternatives:

<div gg-switch-field="status">
  <span gg-case="published|featured">Live</span>
  <span gg-case="draft|archived">Hidden</span>
</div>

The two can combine — gg-case="date|title,asc" matches when sort is date asc or title asc.