← Back to Gallery / Basics / 03: Show/Hide Elements

Show/Hide Elements

Control element visibility
Two approaches: display property commands (show/hide/toggle *display) or class-based toggling.
show hide toggle *display

Demo 1: Display Property Commands

The show, hide, and toggle *display commands all manipulate the display style directly. They work together consistently.

Visible Content

This uses show, hide, and toggle *display.

Demo 2: Class-based Toggle

Class-based visibility allows CSS transitions and custom styling. All three buttons manipulate the same .hidden class, so they stay in sync.

Toggleable Content

This uses class manipulation: add, remove, and toggle.

The Code

Approach 1: Display Property Commands

<!-- Direct visibility commands (all work on inline display style) --> <button _="on click show #content">Show</button> <button _="on click hide #content">Hide</button> <button _="on click toggle *display on #content">Toggle</button>

Approach 2: Class-based (with Toggle)

<!-- Class manipulation for consistent toggling --> <button _="on click remove .hidden from #content">Show</button> <button _="on click add .hidden to #content">Hide</button> <button _="on click toggle .hidden on #content">Toggle</button> <!-- CSS --> .hidden { display: none; }

When to use each approach:

Don't mix approaches:

show/hide/toggle *display use inline styles, while toggle .hidden uses a CSS class. Mixing them causes inconsistent state. Pick one approach and stick with it.

Common patterns:

<!-- Chain commands --> <button _="on click hide #loading then show #content">Load</button> <!-- Toggle with duration --> <button _="on click toggle .highlight on #item for 2s">Flash</button> <!-- Target multiple elements --> <button _="on click show .panel">Show All Panels</button>
← Previous: Toggle Classes Next: Input Mirroring →