Pixel Pete saysShow/hide patterns toggle visibility with display:none or the hidden attribute.
The simplest interactivity: hide and reveal content. Set el.style.display = "none" (removes from layout) or toggle the hidden property/attribute. visibility:hidden hides but keeps the space. Driving this through a CSS class (.is-hidden { display:none }) is cleaner than inline styles and the basis of menus, tabs, and disclosures.
Power-ups you unlock
display:none removes; visibility:hidden keeps space
The hidden attribute is a clean toggle
Prefer a CSS class over inline styles
Foundation of menus, tabs, disclosures
Quirks Mode attacks — common mistakes
Confusing display:none with visibility:hidden
Inline styles where a class is cleaner
Hiding content from assistive tech unintentionally
Boss battleToggle a panel’s visibility on a button click via a CSS class.
Example code
<!doctype html><html><head><meta charset="utf-8"><style>.hide{display:none}</style></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><button id="b">toggle</button><p id="p">now you see me</p>
<script>document.getElementById('b').onclick=()=>document.getElementById('p').classList.toggle('hide');</script></body></html>