How to build a progressively enhanced accordion component with vanilla JS
I’m hearing a lot of enthusiasm over my series of articles about converting popular jQuery methods and plugins to vanilla JS.
Today, I’m going to look how we can replace the need for a big plugin altogether by progressively enhancing HTML to add a bit more functionality to it.
Let’s dig in.
The details
and summary
elements
I love the details
and summary
elements.
You can use them to create interactive expand-and-collapse components without any JavaScript. They work in all modern browsers. In older, unsupported browsers like IE, the content is displayed in full, so the user is always able to access it.
<details>
<summary>Click Me</summary>
<p>Oh, hello there!</p>
</details>
Oh, hello there!Click Me
You can also style them with CSS, including changing the arrow location and appearance.
Open details
elements have the open
attribute on them, and you can set your component to be open by default but hard-coding it into the HTML.
<details open>
<summary>Click to close</summary>
<p>This will be expanded by default</p>
</details>
This will be expanded by defaultClick to close
Converting details
and summary
into a real accordion
You can use a group of details
and summary
elements to create an accordion component.
<details>
<summary>Click Me to Show More</summary>
<p>Hi there!</p>
</details>
<details>
<summary>Click Me to Show More, Too</summary>
<p>Hi there!</p>
</details>
It’s pretty common for accordion groups to only allow one content section to be open at a time. Opening an accordion section closes any existing open ones.
By default, details
and summary
don’t work this way.
But… they do emit a toggle
event when opened or closed. We can hook into that to progressively enhance them further into a true accordion component.
I recorded myself coding this project if you’d like to watch.