Search
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...