In this post i’m gonna walk you through one of my favourite baseline additions to the web and that is the details tag and how i’ll be using it going forward in 2025.

Accordions

So let’s get into this. What’s the big deal? In my day-to-day job, I make quite a few components that make and use some form of accordion-style functionality. In order to achieve this, I used to have to create a container div with another div inside it for content that is initially hidden on page load and a button to toggle its visibility. This is paired with some JS to handle adding a class when the button is pressed to show the content. So I know what you’re thinking: so what? as a one-off occurrence, it’s not that much of a deal and has little impact. That’s true, but we should be using newer, better tools for the job, so first I’ll walk through how we would usually do a simple accordion:

As we can see, this has been achieved by having each row in the accordion consist of a button that can be clicked and a content container that can be hidden. Using some vanilla JS for DOM manipulation, we gain the ability to show and hide a row’s content. We also added a check to ensure that only one row can be open at a time and that if we open another row, the previously open row is closed.

The above approach works fairly well, but we now have new HTML tags, details and summary, that we can use to achieve the same functionality. The details element replaces the div used for the accordion row, and the summary tag takes the place of the button used to trigger the opening and closing of the row.

By using the summary and details tags, we can achieve the same functionality without relying on any JavaScript at all. Remember, the less we rely on JavaScript and the more we make use of browser-based functionality, the less JavaScript we need to send to users’ deviceand more that we make use of the browser base functionality the less js we need to send to users devices.

Absolute Win Hulk GIFfrom Absolute Win GIFs

Oh, and a handy tip: if you want only one details element open at a time, you can use the name attribute. By giving all details elements the same name, they will automatically close when another is clicked. No need for JavaScript to handle any DOM manipulation here.

Here’s how we would achieve the above using these new tags:

As you can see, no JavaScript is used, and we achieve the same functionality as before with less effort and less code to write—reducing the potential for bugs. If you would like to find out more information about the summary and details tags, please check here.