Modern websites often rely on bulky third-party JavaScript libraries to deliver seemingly simple interactive features such as modals and accordions. This reliance can bloat page weight, slow load times, and introduce complexity that hampers site maintenance and updates. This was precisely the challenge facing a client whose site depended heavily on such libraries for modals and accordion components.
The core difficulty lay not just in removing JavaScript but in preserving the user experience that had become tightly integrated with custom scripts and page templates. Simply stripping out the scripts would risk breaking functionality or frustrating users. The key was identifying a modern, native alternative that would maintain interactivity without the overhead.
Visus approached this challenge by leveraging the powerful, yet often overlooked, capabilities of native HTML. The solution centered on two modern web standards: the <dialog> element paired with the Popover API for modals, and the <details> and <summary> tags for accordions.
For modal dialogs, the client's site was transformed using native <dialog> elements. Buttons equipped with the popovertarget attribute opened dialogs, while closing was handled by buttons with popovertargetaction="hide" or simply pressing the Escape key. This eliminated the need for extra JavaScript while preserving all modal functionalities. For example:
<button popovertarget="modal">Open Modal</button>
<dialog id="modal" popover="auto" class="max-w-2xl backdrop:backdrop-blur-sm">
<p>Click the "X" to close me.</p>
<button popovertarget="modal" popovertargetaction="hide">x</button>
</dialog>
Collapsible content sections were similarly modernized by swapping JavaScript-based accordions for native HTML accordions built with <details> and <summary>:
<details>
<summary>Native HTML Accordion (click to expand)</summary>
You can build accordions/disclosures with plain HTML, just like this one!
</details>
These elements support expanded states via the open attribute and can be configured for exclusive accordion behavior without additional scripting.
The results were compelling. Page loads became faster and lighter, and the codebase simplified significantly by removing dependencies on third-party scripts. The client’s team gained a more maintainable frontend with interactive elements that remained intuitive and consistent for users. There were no longer risks of JavaScript conflicts or performance degradations tied to external libraries.
This experience underscores an important lesson: native HTML features have evolved to solve many long-standing UI challenges. Staying current with web standards like <dialog>, the Popover API, and <details> allows organizations to eliminate unnecessary scripts, reduce technical debt, and deliver superior user experiences with less effort. Often, the smartest path forward lies within the native specification — no extra JavaScript required.
For teams striving for performance, simplicity, and future-proofing, embracing these modern HTML capabilities can unlock meaningful benefits without sacrificing functionality.