Toggle Attributes and Properties

Toggle HTML attributes and CSS properties
Beyond class toggling, hyperscript can toggle boolean attributes like disabled and CSS properties like display.

@attribute *property toggle

Toggle Syntax Reference

Prefix	Type	Example
`.`	CSS Class	`toggle .active on #btn`
`@`	HTML Attribute	`toggle @disabled on #btn`
`*`	CSS Property	`toggle *display on #box`
`'s`	DOM Property	`toggle #btn's disabled`

Demo 1: Toggle Disabled Attribute

Use @disabled to toggle the disabled state of form elements.

Status: enabled

<button id="target-btn">Target Button</button> <button _="on click toggle @disabled on #target-btn"> Toggle Disabled </button>

Demo 2: Toggle Required Attribute

Toggle the required attribute on form inputs.

Required: no

<input type="email" id="email-input" /> <button _="on click toggle @required on #email-input"> Toggle Required </button>

Demo 3: Toggle CSS Display Property

Use *display to toggle element visibility via the CSS display property.

Visible Content

Note: *display toggles between none and the previous display value.

<div id="display-box">Visible Content</div> <button _="on click toggle *display on #display-box"> Toggle Display </button>

Demo 4: Toggle CSS Visibility Property

Use *visibility to hide elements while preserving their space in the layout.

I take up space even when hidden

Note: *visibility toggles between hidden and visible. Element still occupies space.

<div id="visibility-box">Content</div> <button _="on click toggle *visibility on #visibility-box"> Toggle Visibility </button>

Demo 5: Toggle CSS Opacity

Use *opacity for fade effects.

Fading Content

Note: *opacity toggles between 0 and 1. Add CSS transition for smooth fade.

<div id="opacity-box" style="transition: opacity 0.3s"> Fading Content </div> <button _="on click toggle *opacity on #opacity-box"> Toggle Opacity </button>

Demo 6: Toggle Attribute on Specific Element

Use toggle @attribute on #element to toggle attributes on specific elements.

Test "has @disabled": -

<button id="prop-btn">Another Target</button> <button _="on click toggle @disabled on #prop-btn"> Toggle Disabled </button>  <button _="on click toggle #prop-btn's @disabled"> Toggle via Possessive </button>

When to use each syntax:

.class - Toggle CSS classes for styling changes
@attribute - Toggle HTML attributes (disabled, required, readonly, hidden)
*property - Toggle CSS properties (display, visibility, opacity)
element's @attribute - Reference attribute on specific element

Supported CSS Properties:

*display - Toggles none ↔ previous value (or block)
*visibility - Toggles hidden ↔ visible
*opacity - Toggles 0 ↔ 1

Common Attribute Toggles:

@disabled - Disable/enable form elements
@required - Make form fields required/optional
@readonly - Make inputs read-only
@hidden - Hide elements (HTML5 hidden attribute)
@checked - Toggle checkbox/radio state
@open - Toggle details/dialog open state

← Previous: Smart Element Toggle Back to Gallery →