Building a `
` Element That Only Expands

The HTML `

` and `` elements give you a tidy way to create toggleable content. Normally, clicking the summary’s marker (the triangle) expands the hidden text; clicking again collapses it. But some interface patterns call for a one-way interaction: think of a “Read more” button that opens an article section but offers no way to fold it back up. That can be done with just HTML and CSS, no JavaScript required.

Before going further, it’s worth noting that removing a control from a user interface—or hiding large chunks of content behind a toggle—isn’t always the best call. Still, there are valid use cases, and a lightweight CSS solution can beat a heavier approach when this behavior is truly what you need.

The key trick is to hide the `

` element once the `
` is in its open state.

details[open] summary {
  display: none;
}

And that’s the whole trick—once open, the list stays open.