Replacing JavaScript with Just HTML

Summary

Replacing JS with just HTMLby Aaron T. Grogg published on Dec 27, 2025For many years now, JavaScript has been the workhorse of the web. If you wanted to do something that couldn't be done with just HTML and CSS, you could usually find a way to do it with JS.And that is great! JS has helped push user experiences forward, and honestly helped push HTML and CSS forward!But as time marches on, and the HTML and CSS methods gain traction, we need to start replacing the old JS methods that feel so comfy with new methods that require less JS.Nothing against JS, but it has better things to do than setup and manage your accordions or offscreen navigation menus... Plus, JS needs to be downloaded, decompressed, evaluated, processed, and then often consumes memory to monitor and maintain features. If we can hand-off any JS functionality to native HTML or CSS, then users can download less stuff, and the remaining JS can pay attention to more important tasks that HTML and CSS can't handle (yet).Below are a few examples; any you care to add?Table of Contents:Accordions / Expanding Content PanelsDescription:The details and summary HTML elements provide an HTML-only replacement to the typical JS accordion:CopePen: Accordion / Expanding ContentUse cases:Hiding/showing contentExpanding content sectionsBasic implementation:<details> <summary>Initially closed, click to open</summary> Content is initially hidden, but can be revealed by clicking the summary.</details>Add an open attribute to set the default appearance as "open":<details open> <summary>Initially open, click to close</summary> Content is initially visible, but can be hidden by clicking the summary.</details>Use the same name attribute on all related details (like radio buttons) to restrict only one open panel at a time:<details name="foo" open> <summary>Initially open, clicking others will close this</summary> Content is initially visible, but can be hidden by clicking the summary; only one panel can be open at a time.</detai...