# Click to Expand
> Toggle clickToExpandNode and beforeExpandChange veto strategies against a live tree, with an event log streaming every decision.
**Source:** [https://jsonview.svelte.page/examples/click-to-expand](https://jsonview.svelte.page/examples/click-to-expand)
**Markdown mirror:** [https://jsonview.svelte.page/examples/click-to-expand.md](https://jsonview.svelte.page/examples/click-to-expand.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: click to expand.
Toggle label-click expansion and watch beforeExpandChange veto decisions stream into a live event log.
**Metadata:** tag: `INTERACTION` | prop: `clickToExpandNode` | hook: `beforeExpandChange`
### Notes
- `clickToExpandNode` makes the whole field label a toggle, not just the disclosure arrow.
- `beforeExpandChange` runs before every expand or collapse and can veto the change — return `false` to keep a node as-is.
- Each decision streams into a live event log so you can see exactly which node fired and whether it was allowed.
### Source
#### ClickToExpand.svelte
Source file: [src/lib/examples/click-to-expand/demos/ClickToExpand.svelte](https://github.com/humanspeak/svelte-json-view-lite/blob/main/docs/src/lib/examples/click-to-expand/demos/ClickToExpand.svelte)
```svelte