Today, I wanted to share a little approach you can use to create accessible, HTML-native accordions (sort of), without any JavaScript.
There are going to be included in the new UI library I'm building for people who love HTML, and I wanted to show you how they work.
Let's dig in!
<details> and <summary>
The <details> and <summary> elements are native HTML elements that create a show/hide component.
You put your entire accordion content inside a details element. The heading that should act as a toggle goes inside a summary element.
<details> <summary>Toggle me</summary> I'm the content </details>
Toggle me
I'm the content
Because it's just HTML, the <details> and <summary> elements are progressively enhanced by default. Browsers that support them get the interactivity, but older browsers see the content full expanded and accessible.
When the component is open or expanded, it has an open attribute on it. You can also add the open attribute to make your accordion expanded by default.
<details open> <summary>Toggle me, too</summary> I'm open by default. </details>
Toggle me, too
I'm open by default.
In newer browsers, the <details> element also supports a [name] attribute.
When present, it creates a group with any other <details> elements that same attribute value. When one of them is opened, any others in the group will automatically be closed.
<details name="demo" open> <summary>Toggle me</summary> I'm the content </details> <details name="demo"> <summary>Toggle me, too</summary> I'm open by default. </details>
Toggle me
I'm the content
Toggle me, too
I'm also content.
Important note: the term "accordion" often implies that only one section can be open at a time, but a lot of practitioners consider this a bad practice for accessibility reasons. In other words, just because you can doesn't mean you should.
Making them look good
So, we've got a collection of show/hide content. How do we make them look good?
To start, let's added some spacing and dividers between them.
We'll use :has() and the next sibling combinator (+) to match every details element that has another details after it.
Then, we'll add a border-bottom, remove any margin, and add some top and bottom padding.
details:has(+ details) { border-bottom: 1px solid #e5e5e5; margin: 0; padding: 0.75em 0; }
This selector won't match against the last details in the set, so let's also add some padding to the top for that element.
details + details { padding: 0.75em 0 0; }
Here's a demo of the current progress.
Now, this might be perfectly fine already. But some people prefer having the expand/collapse icon after the content rather than before it.
I've been told that placing the icon before the text is better for accessibility, but have been unable to find a reference for this.
If we use a list-style of none for our summary element, we can remove the icon.
summary { list-style: none; }
Then we can add our own by using the ::after pseudo-selector and the content property.
Here, I'll add a unicode plus sign, and make it a bit bold. I'm also going to add a transition to animate it. When the element is expanded and has the [open] attribute, we'll transform it and rotate it 45 degrees, turning it into an X/close icon.
summary::after { content: "0FF0B"; font-weight: bold; transition: transform 150ms ease-in-out; } [open] summary::after { transform: rotate(45deg); }
By default, this will show up right after the text.
If we use display: flex and justify-content: space-between on our summary, we can push it all the way to the end of the block.
summary { display: flex; list-style: none; justify-content: space-between; }
Here's another demo.
Customizing it
With this setup, customizing is as simple as updating a few CSS properties.
You might choose to customize the icon, add a little space between the summary and the content, adjust the size of the summary text, and more.
If you enjoy this kind of setup, you'll love the new UI library I'm working on. I'll be sharing a dedicated page with more info and the current WIP over the next few days, so stay tuned!
Like this? A Go Make Things membership is the best way to support my work and help me create more free content.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
.png)
0 Komentar untuk "[Go Make Things] HTML-native accordions"