DEV Community

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

Salma Alam-Naylor on February 11, 2022

If you've been watching my Twitch streams lately, you'll know I'm currently rebuilding, redesigning and reimagining the full whitep4nth3r.com exper...

Read full post

Anneta Wamono • Feb 12 '22

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

Julia 👩🏻‍💻 GDE • Dec 26 '22

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.

Nitesh Khatri • Feb 12 '22

What about how to do design?

MrakCw Dev • Feb 12 '22

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)

msarisjulis • Nov 29 '23

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>

Comment hidden by post author - thread only accessible via permalink

yoquiale • Feb 14 '22

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.

Comment hidden by post author - thread only accessible via permalink

Duy K. Bui • Feb 16 '22

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.

yoquiale • Feb 13 '22

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.