DEV Community

Salma Alam-Naylor
Salma Alam-Naylor

Posted on • Originally published at whitep4nth3r.com

How to build an HTML-only accordion — no JavaScript required!

If you've been watching my Twitch streams lately, you'll know I'm currently rebuilding, redesigning and reimagining the full whitep4nth3r.com experience — and I'm trying to do this with as little JavaScript as possible. And whilst building the table of contents for the new blog page layout, I discovered a way to build an accordion with no JavaScript in just four lines of code! Let's take a look!

Use the HTML details element

To build the markup for an HTML accordion, use the <details> element. Use a <summary> tag to provide the title for the accordion. Add your content, and you're done!

<details>
  <summary>Section title</summary>
  <p>Here is the content!</p>
</details>
Enter fullscreen mode Exit fullscreen mode

Load the open accordion by default

By default, the <details> element loads in a closed state, and I always prefer to not hide content from readers when the page loads. We can load the accordion open by default by adding the open attribute to the <details> element. Perfect!

<details open>
  <summary>Title</summary>
  <p>Here is the content that is open by default!</p>
</details>
Enter fullscreen mode Exit fullscreen mode

Readers can click to close the accordion to minimise clutter if they so wish — especially when on a mobile device.

A video showing the clicking of the table of contents that is opening and closing.

Browser support and accessibility

At the time of writing this article, there's full modern browser support for the details element as reported by caniuse.com, apart from Internet Explorer (obviously!) and Opera.

I also confirmed that the <details> element is keyboard-accessible in Chromium, Firefox and Safari. Tab to the element and use space or enter to open and close.

Further reading

If you're curious, you can view the source code that creates the full table of contents. Read more about the details element on MDN and have fun building with HTML!

Top comments (21)

Collapse
 
annetawamono profile image
Anneta Wamono

That's very cool! Thanks for introducing me to the details tag.

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Even though it is a nice and handy tag, always be careful when to use it and what its true purpose is (to show a summary). Do not use it as a navigation, that could be a misuse of html tags.

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

But then you need to write JavaScript which defeats the point of this article! 🥲

Collapse
 
khatrinitesh profile image
Nitesh Khatri

What about how to do design?

Collapse
 
mrakcw profile image
MrakCw Dev

Easy, look at this example
codepen.io/MrakCw/pen/mdWBWjb

String in summary it can be like a link, well, you can just open it without a link)

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor • Edited

This solution works as intended without any extra CSS, but the design is totally up to you. Add classes to the elements and style it up! If you’re curious about how I did it, I provided the link to the source code.

Collapse
 
khatrinitesh profile image
Nitesh Khatri

mean - it is possible it will be use inline style in HTML file, right?

Thread Thread
 
whitep4nth3r profile image
Salma Alam-Naylor

Yes, you can do it however you like.

Thread Thread
 
khatrinitesh profile image
Nitesh Khatri

okay, I will try my best level for sure. :-)

Thread Thread
 
link2twenty profile image
Andrew Bone

I did a post a few years ago and go into a little detail about styling, if you're interested.

Collapse
 
msarisjulis profile image
msarisjulis

Hello!
I have modified it a little to highlight it:

<details>
    <summary><h1><span style="color: #333399; background-color: #ffffff;"><strong>DETALLE DE CONTENIDOS:</strong></span></h1></summary>
<p>
   CONTENIDO CONTENIDO CONTENIDO
</p>
</details>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
khuongduybui profile image
Info Comment hidden by post author - thread only accessible via permalink
Duy K. Bui

That's not exactly an accordion element.

The key point of "accordion" is you have a list of titles grouped together. Clicking on one title will expand it WHILE collapsing the rest of the titles in the group. Clicking on an expanded title simply collapse it.

The tag only represents a single title.

Collapse
 
oniichan profile image
yoquiale

I thought the details tag was common knowledge but I'm surprised a lot of people don't know HTML5. I learned HTML5 back in 2014 and thought most people knew about it.

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

I think when you learn HTML you don’t sit down and memorise all the tags – there are a lot! Sometimes you don’t know something because you’ve never needed it. Just because you don’t know that a certain tag exists, doesn’t mean you don’t know HTML 😁

Collapse
 
oniichan profile image
Info Comment hidden by post author - thread only accessible via permalink
yoquiale

l learned HTML5 as a part of the I.T degree I was studying back then, we had to learn every tag, and even though I don't use the tag, I know it exists and what it does. You can't say you know HTML when you only know 10 tags either.

Collapse
 
oniichan profile image
Info Comment hidden by post author - thread only accessible via permalink
yoquiale • Edited

Don't hide my comment, you prick.

Collapse
 
aryaprakasa profile image
Info Comment hidden by post author - thread only accessible via permalink
Arya Prakasa

For those who want to style the details element.
I've made a simple video about it youtu.be/CS2bsaFRECo

Collapse
 
coen2009 profile image
Enrico Colautti

What about open/close animations? I think with it's not possible

Collapse
 
_hs_ profile image
HS

Opera seams to support. Maybe not mini but that's a different browser.

Collapse
 
paulurian profile image
Paul Urian

Thank you for the idea :)

online-projects.paul-urian.ro/Proj...

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

LOVE IT!!

Some comments have been hidden by the post's author - find out more