Screenshot of collapse button for an open details element

Collapse an Open Details Element (JavaScript)

The <details> HTML element is really great. And paired with <summary> you've got all you really need to make easy-to-read expandable/collapsable sections of a document. But I recently wanted to have at the bottom of each segment a quick way to close the expanded details segment I'd just scrolled through. By default, you can simply click on the <summary> element you used to open it. But what if your sections are long enough that that has drifted off the top of your screen? That's the situation I was in that led me to want to write as little JavaScript as possible to reach up to the top from the bottom of my (long) details section and collapse it. So we're going to explore how to collapse an open details element in this article.

Continue reading