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.

Image of Bright Data

Global Data Access Unlocked – Reach data across borders without restrictions.

Unlock the power of global data collection with our advanced proxy solutions. Ideal for market research and more.

Unlock Data Now

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay