The <details> and <summary> elements in HTML are useful for making content toggles for bits of text. By default, you see the <summary> element with a toggle triangle (▶︎) next to it. Click that to expand the rest of the text inside the <details> element.
But let’s say you want to be able to click it open and that’s that. Interactivity over. I saw this used in one of those “Read more” article designs, where you click that “Read more” button and the article expands, but there is no going back.
I’ll preface this by saying that I’m not sure that this is a great idea in general. Removing controls just doesn’t feel great, nor does slapping too much important content within a <details> element. But, hey, the web is a big place and you never know what you might need. The fact that this can be done in a few lines of HTML/CSS is compelling and might reduce the need for heavier solutions.
The main trick here is to hide the summary when details is open.
details[open] summary {
display: none;
}That’s it really.
yeah, nice little trick.
I really don’t see a problem without being able to toggle closed. In fact I have done this on sites using jQuery where once opened the more button disappears, I think it works as it unclutters the UI and gives the user one less option, plus they wanted to read more anyhow.
HTML has come along way, look forward to using this in the future.
To add onto this great trick, if you want to keep the summary visible, you should be able to cancel pointer events.
This doesn’t prevent it from being closed. The pointer events rule
pointer-eventsonly prevents it from being closed using a pointer.It can still be closed using keyboard operations (and potentially some other methods, some speech control, which I haven’t checked yet).
I come for the CSS.
I stay for the jokes.
In case we want to keep the
<summary>visible we could usepointer-events: none;on it.It does seem like misuse to me. The HTML spec states that, “The user agent should allow the user to request that the additional information be shown or hidden.”
Browsers should probably display a summary at all times. They could either not allow the summary to be hidden or display the default summary (“Details”) when the custom one is hidden.
Thanks for the heads up, Chris.
Been messing on with a TL;DR toggle, myself, as I’ve seen them on a few mainstream websites – like 3 Mobile – but can’t decide if it’s necessary?
Probably better off with something like you’ve described then it’s more practical, but less of a fashion choice so won’t go out of date.
Great tip! Seems like it’d be fun to use this for a quiz site, where you show the question and have a “Show Answer” summary toggle that cannot be closed.