Search
Scroll Driven Animations Notebook
13.2.2025
Adam’s such a mad scientist with CSS. He’s been putting together a series of “notebooks” that make it easy for him to demo code. He’s got one for gradient text, one for a comparison slider, another for accordions…
Scroll Driven Animations Notebook originally...
Spicy Sections
7.12.2021
What if HTML had “tabs”? That would be cool, says I. Dave has been spending some of his time and energy, along with a group of “Tabvengers” from OpenUI, on this. A lot of research leads to a bit …
Web Languages as Compile Targets
30.4.2021
Jim Nielsen quoting Eric Bailey:
He references an example on Twitter where someone noted you can use the <details> element to “create a native HTML accordion,” to which someone responded: “this works without Bootstrap? 🤯”
What’s the problem here? From
…
The post...
Two Issues Styling the Details Element and How to Solve Them
13.1.2021
In the not-too-distant past, even basic accordion-like interactions required JavaScript event listeners or some CSS… trickery. And, depending on the solution used, editing the underlying HTML could get complicated.
Now, the <details> and <summary> elements (which combine to form...
Exploring What the Details and Summary Elements Can Do
26.11.2020
We’ve mentioned before just how great the <details> and <summary> elements are. They’re great for quickly making accordions that are accessible to touch, mouse, and keyboard input:
CodePen Embed Fallback
<details> and <summary> can even be used to play/pause gifs!...
How to Animate the Details Element Using WAAPI
5.11.2020
Animating accordions in JavaScript has been one of the most asked animations on websites. Fun fact: jQuery’s slideDown() function was already available in the first version in 2011.
In this article, we will see how you can animate the native <details> element using the Web Animations...
Accordion Rows in CSS Grid
23.7.2020
I’d bet grid-template-columns is used about 10× more than grid-template-rows, but maybe everyone has just been missing out. Eric Meyer chucks a bunch of row lines onto his main site layout grid like this:
grid-template-rows: repeat(7, min-content) 1fr repeat(3, min-content);
That way, if...
Collective #613
9.7.2020
1-Line Layouts * Accordion Rows in CSS Grid * viewBox Newsletter * Knopf.css * WordPress Static Site
The post Collective #613 appeared first on Codrops
The Anatomy of a Tablist Component in Vanilla JavaScript Versus React
5.5.2020
If you follow the undercurrent of the JavaScript community, there seems to be a divide as of late. It goes back over a decade. Really, this sort of strife has always been. Perhaps it is human nature.
Whenever a popular framework gains traction, you inevitably see people comparing it to rivals....
Stop Using “Dropdown”
16.3.2020
Adrian Roselli notes that it might actually mean:
A <select> menu
An ARIA Listbox, Combobox, Menu, or Disclosure Widget
An input with a <datalist>
An input with autocomplete
A <details><summary> block
An accordion
Flyout navigation
In my own usage, I tend to mean...