toggle()

Flips a boolean state. In an :on() rule it is the mutation --open: toggle().

Syntax

--<state>: toggle();

registry syntax: toggle(--state [, closest(selector)])

Parameters

None.

Effect

No value. In :on() it takes no arguments: the state is the custom property on the left.

Example

/* The state is reflected into aria-pressed. */.toggle {  --on: state(false, bind(aria-pressed));}.toggle:on(click) {  --on: toggle();}.toggle .label {  content: when(--on, "On", "Off");}.toggle:when(--on) .knob {  background: #15803d;}.toggle:when(--on) .knob::after {  translate: 20px 0;}

Behavior

• A mutation of the state on the left. In an :on() rule, --x: toggle() changes the nearest --x owner of the element the rule matched. set(), toggle(), increment(), decrement() and cycle() share one model: one winner per state through the cascade, and one transaction per event, read against the values from before it.
• Conceptually, --open: toggle() sets the opposite of the value from before the event. It needs a boolean state.
• Never registered as a value function, so the CSS Values 5 toggle() value function keeps working elsewhere.

Supported contexts

• As a mutation in an :on() rule.

Limitations

• Booleans only. Use cycle() for more than two values.
• By itself it doesn’t update aria-pressed: add bind(aria-pressed) to the state, as in the example, or an --attr-aria-pressed declaration.

Examples

• State toggle · API examples, runs the real runtime
• Attribute sync · API examples, runs the real runtime

Related