Toggle an element

Flip the hidden attribute.

JavaScriptBrowser · DOM Version 1.0.0 · MIT · .md

function toggle(element) { element.hidden = !element.hidden; }

Usage

Markup

<nav id="menu">Menu</nav>

Script

const menu = document.querySelector('#menu');
toggle(menu);
menu.hidden; // → true
toggle(menu);
menu.checkVisibility(); // → true

Lines marked → were executed in headless Chromium against the markup above, and each result was compared with the value shown. Lines marked e.g. are illustrative.

Know the limits

• The original’s first version set display to block, which breaks flex and grid containers; toggling hidden restores the element’s own display.
• A stylesheet display rule overrides hidden; see Hide an element. For a disclosure widget, <details> needs no JavaScript.

The function above is the code the usage lines run. It does not validate its arguments; add checks where it receives untrusted input.

Keep exploring

• Check if a given DOMRect is contained within another DOMRect — True when the target lies inside the container or on its edges.
• Check if two DOMRects intersect — Two rects intersect when they meet on both axes.
• Compare two DOMRects for size and position match — Compare x, y, width and height exactly.