DEV Community

Cover image for Fun with details
Shubham Naik
Shubham Naik

Posted on

1

Fun with details

Happy Friday! Here's a little article to end your week. It is a mirror of an article on my site. Feel free to visit it if you want to see live examples of what I show here!

Let's learn about <details />

<details /> is a very spiffy, yet relatively unadopted component in the HTML catalog. It's not super dynamic, but pretty useful if you ever want to build accordions like below:

Hacking with Details

The cool thing about <details /> is that it can act as a state machine in pure HTML. This means when we add some useful CSS selectors, we can make the <details /> element act like a full-fledged toggle button.

Let's look at this example below:

As you can see above, I just created a "button" entirely in CSS that increases the font-size of .open-me-target on click of the summary.

Take note of the sibling combinator ~ and the attribute selector https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors. [open] tell us to look at instances when the class .open-me has the attribute open, and (~) tells us to look for instances when .open-me-target follows .open-me within the same parent element. This lets us only apply the blue, 50px style to instances that meet both of these criteria.

Polishing it up

While functional, the UI above looks kind of janky. Let's make it look a little better.

Pretty cool I think.

Notes

Other HTML elements can be used to create a toggle-like state, the most significant being <input type="checkbox" />. I focused on <details /> because keyboard users can toggle using the return — which I find more natural — while checkboxes are toggled with the spacebar.

I probably wouldn't use this hack in production. Changing HTML components' core functionality, even if done carefully, hampers accessibility, as not all browsers can understand the wackiness we just wrote down.

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay