Tags: toggle



Design Patterns on CodePen

This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.

Easy Toggle State

I think about 90% of the JavaScript I’ve ever written was some DOM scripting to handle the situation of “when the user triggers an event on this element, do something to this other element.” Toggles, lightboxes, accordions, tabs, tooltips …they’re all basically following the same underlying pattern. So it makes sense to me to see this pattern abstracted into a little library.

Collapsible Sections

The latest edition of Heydon’s Inclusive Components is absolutely fantastic! The pattern itself—toggling sections of content—is quite straightforward, but then there’s a masterclass in how to create a web component that still allows the content to be accessible in older browsers. The key, as ever, is progressive enhancement:

Whether implemented through web components or not, progressive enhancement not only ensures the interface is well-structured and robust. As we’ve seen here, it can also simplify the editorial process. This makes developing the application and its content more inclusive.

User Interfaces for Variable Fonts · An A List Apart Article

A good introduction to variable fonts, and an exploration of the possible interface elements we might use to choose our settings: toggles? knobs? sliders? control pads?

Tooltips & Toggletips

Another great deep dive by Heydon into a single interface pattern. This time it’s the tooltip, and its cousin, the toggletip.

There’s some great accessibility advice in here.

Introducing A11y Toggle

Here’s a bit of convergent evolution: Hugo’s script is similar to what I wrote about recently.

He also raises a point that Kevin mentioned:

I would like to investigate on the details and summary elements as they are basically a native implementation for content toggles.

For some reason details never got much browser love, even though it’s clearly paving a well-trodden cowpath.

A no-javascript toggle content feature

A clever way of doing progressive disclosure with CSS.