The Different (and Modern) Ways To Toggle Content
November 11, 2024
It’s easy to default to what you know. When it comes to toggling content, that might be reaching for display: none or opacity: 0 with some JavaScript sprinkled in. But the web is more “modern” today, so perhaps now is the right time to get a birds-eye view of the different ways to toggle content — which native APIs are actually supported now, their pros and cons, and some things about them that you might not know (such as any pseudo-elements and other non-obvious stuff).So, let’s spend some time looking at disclosures ( and ), the Dialog API, the Popover API, and more. We’ll look at the right time to use each one depending on your needs. Modal or non-modal? JavaScript or pure HTML/CSS? Not sure? Don’t worry, we’ll go into all that.
Source: The Different (and Modern) Ways To Toggle Content | CSS-Tricks
The modern web platform is full of amazing focussed APIs and features to make things thatised to be painful and advocate straightforward.
Disclosing and hiding content is a very old UI pattern. Here the folks at CSS tricks look at modern ways of doing it so you can put away your opacity: 0 for that for ever!
