A brief survey on styling disclosure widgets


I'm an amateur illustrator who'd like to someday do that whole "art" thing for a living. In the meantime, I'm hyperfixated on Monster Hunter, Mega Man, polearms, and probably several other things. Also aspiring to become an IRL amalgamation of leading ladies from Professor Layton games (officially girlpilled since 3/25/2023!!).


"Lives with plenty of food and comfort... People have stopped bothering to think with their heads... There may still be some people who want to do something. If we could somehow let those kinds of people know what Dr. Weil is really thinking... We might be able to change Neo Arcadia." -Ciel, Mega Man Zero 3

A <details> element without styling looks like this:

<details>: The Details disclosure element

The details HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the summary element.

(read more on MDN)

Its appearance (a block element with a little arrow inside the summary element) is fairly consistent across browsers. That's about as far as it goes though.

Hiding the arrow

What you're supposed to do is

details > summary {
  list-style: none;
}

details > summary::marker,
details > summary::-webkit-details-marker {
  display: none;
}

we can't do that second part on cohost though!

So what if we change display and list-style of summary?

Click me

Very well?

Depending on your browser you may already see the caveat - this works in Chromium and Firefox (even display: block is enough), but not Safari (which wants that -webkit-details-marker after all).

The size of the arrow depends on the size of the font, so we can just set that to 0, and set it back in a span element inside the summary:

Click me

Very well.

And we probably want to indicate to the user that our now-regular-looking summary is interactive, so let's give it an underline:

Click me

Very well.

And that's about it, but if you don't get an underline in Safari, you might have to separate text-decoration: underline dotted into text-decoration: underline; text-decoration-style: dotted.

Most interactive tricks that you'll see around here are variations of this formula - the summary is what you can click and the rest of the elements inside the details-element are what should appear/disappear.

🍎 take a bite

all gone!

The elements can overlap (position: absolute), be click-through (pointer-events: none), push each other around (via flexboxes or even just float), and so on - inspect an element in your favorite CSS crime and you might find something new.

Inline disclosure

So you want a little clarification or a bit of trivia right in the middle of the text. You should be able to

just make details and summary inline

(by giving them display:inline)

, right?

Alright, maybe not that easy - details is a block element so it breaks the paragraph, but if we

make our own paragraph

(out of a DIV element, of course - it doesn't need much apart of `margin: 1.25em 0` to mimic the regular paragraphs)

, it should be fine.

Apparently not! For reasons that probably require digging into the specification, disclosure element can only be an inline-block, not inline. But there is this funky new-ish (2018 and onward) display style called "contents", which kind of just pretends that a container doesn't exist and flows its children individually. So we

give it to details

(and don't give it to summary, because that renders the disclosure element non-interactive on Safari)

, and that's it for real?

Well, mostly. Since the disclosure element isn't real anymore, it can't have a background (not that you really wanted it to, I bet), and also Chromium is a problem this time! When a display: contents disclosure is closed, it adds a newline after it for some reason. Here, have a look:

A disclosure

(now open!)

and a bit of trailing text.

But still, good for trailing details in a paragraph, I suppose?

Inline block disclosure

Given the right conditions, we can

make it seem

If you have enough text to push your little inline box to screen width, you can style it like a little window or an infobox. I'm also making this one into an inline-flex container so that the entirety of the "title bar" remains clickable when it's open.

like an inline block is what we wanted to achieve all along.

I wrote a generator for these.

Floating disclosure

I also had this idea to create

tooltips

The little arrow-tip is a relative-positioned element, and this content-div is an absolute-positioned element - try inspecting it.

through a combination of factors, and it sure looks neat, but I feel like this is going to combust at first opportunity.

Conclusions

Fun element, isn't it?

For less-esoteric purposes you may also be interested in eevee's tutorial

prechoster source files for this post can be found on GitHub

Aqueous [Lv. D Sluggish Edgegirl]

@AqueousAblution

An alliteratively artistic gal