ScriptWeaver View source

CollapsingFrame

A disclosure section: a header that expands and collapses its content — "Advanced settings", sidebar groups, FAQ items. The whole header is a real button (one Tab stop, Space/Enter toggles, the chevron shows the state), so it works for everyone.

Live preview

Live preview. In the Player's built-in docs viewer (scriptweaver --help), this renders CollapsingFrame as a live, theme-aware widget you can interact with.

Example

const adv = app.CollapsingFrame({ heading: 'Advanced settings', collapsed: true });
adv.pack.configure({ fill: 'x' });

adv.body.ToggleSwitch({ text: 'Verbose logging' }).pack.configure({ anchor: 'w' });
adv.body.Button({ text: 'Reset…', bootstyle: 'danger outline' }).pack.configure({ anchor: 'w', pady: 4 });

adv.bind('<<CollapsingFrameToggled>>', () => savePref(adv.collapsed));

Children go into adv.body — a regular Frame. Collapsing hides the body (its layout survives the round trip); the frame shrinks to just the header.

Options

Option Type Description
heading string The header title (it doubles as the accessible label).
collapsed boolean The section state; assignable any time.
state string 'normal' or 'disabled' — a disabled section can't be toggled.

<<CollapsingFrameToggled>> fires on every real change (no-ops don't), and the new state is announced to screen readers.

See also