Creating a Details Element That Opens But Never Closes

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.