Replace JS with HTML: Accordions, Popovers & More

JavaScript has long powered web interactivity, but modern HTML offers native alternatives that reduce JS dependency, improve performance, and lighten page loads. Aaron T. Grogg’s HTMHell article showcases practical replacements for common JS features using pure HTML and minimal CSS.

Key examples include:

Accordions using

and

elements. Add the ‘open’ attribute for default expansion, or ‘name’ for radio-like single-open behavior. Perfect for expandable content panels.

Autofilter inputs via with . Type to filter browser names, quantities, or times natively—no JS needed, though Firefox limits non-text types.

Modals and popovers with the ‘popover’ attribute on

. Types include ‘auto’ (light dismissible), ‘hint’, and ‘manual’. Toggle via popovertarget buttons.

Offscreen navigation using popover on

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top