Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Open-on-click / close-on-click toggle that latches a 0/1 state and writes it to one or more `data-*` attributes. Compound: expanded into eventListener + pulseOr + latch + domPropertyWrite per open target. Each `openTarget` receives the same attribute write so popup / trigger / backdrop / overlay all flip in sync.
Type modalToggleCategory inputsContext sharedDynamic ports noCompound yes
Inputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
openTriggers | selectorList | [] | CSS selectors that fire the open pulse on click. Each row is one selector — add as many as you need (up to 4). Each is bound an event listener; firing latches state to 1. |
closeTriggers | selectorList | [] | CSS selectors that fire the close pulse on click. Common: a close button (`.modal-close`) and a backdrop click-out target (`.modal-backdrop`). Leave empty for an open-only one-way latch. |
openTargets | selectorList | [] | CSS selectors that receive the `openAttribute` write. The popup itself, the trigger button (so it can highlight), and any backdrop / body lock element are typical entries. All flip together. |
openAttribute | string | "data-open" | HTML attribute written to each `openTarget`. Default `data-open`. Use `data-active`, `data-state`, `aria-expanded` or any custom attribute your CSS reads. |
openEvent | domEvent | "click" | DOM event name for the open triggers. Default `click`. Use `mouseenter` for hover-open, `focus` for keyboard-open, etc. |
closeEvent | domEvent | "click" | DOM event name for the close triggers. Default `click`. Useful as `mouseleave` paired with `mouseenter` on open. |
cssVarWrites | string | [] | Optional list of `{target, name}` pairs. Each emits an additional unitless write of the 0/1 latch state to a CSS custom property (e.g. `--menu-open`). Use when CSS animations are driven by `var(--x)` instead of (or in addition to) the data-attribute selector. Edit as raw JSON for now: `[{"target":".ds-page","name":"--menu-open"}]`. |
Use cases
- Modal / drawer open-close — `openTriggers: [".btn-open"]`, `closeTriggers: [".close-x", ".backdrop"]`. Each click on the open trigger sets `data-open=1` on every `openTarget`; each click on a close trigger resets to 0. Pair with a CSS `[data-open="1"]` rule for visibility / clip-path animation.
- Dropdown menu open-close — same shape, smaller scope. Common pattern in nav menus, account dropdowns, language switchers.
- Mobile hamburger overlay — `openTriggers: [".hamburger"]`, `closeTriggers: [".overlay-backdrop"]`, `openTargets: [".overlay", ".hamburger", "body"]`. The body write lets CSS lock scroll while open.
- Popover / tooltip on click — for click-toggled popovers, the same 0/1 latch pattern fits.
Related nodes
Envelope
Use modalToggle as the node type inside a graph node envelope. Add id, optional params, optional connections, and optional activeWhen based on the guide context.
Generated source
Registry faster-motion-docs/node-registry.jsonCategory page /help/faster-motion/faster-motion-node-category-inputs/