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>
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>
Readers can click to close the accordion to minimise clutter if they so wish — especially when on a mobile device.
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)
That's very cool! Thanks for introducing me to the details tag.
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.
What about how to do design?
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)
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.
mean - it is possible it will be use inline style in HTML file, right?
Yes, you can do it however you like.
okay, I will try my best level for sure. :-)
I did a post a few years ago and go into a little detail about styling, if you're interested.
Native HTML: Accordion
Andrew Bone ・ Jan 4 '19 ・ 3 min read
Hello!
I have modified it a little to highlight it:
But then you need to write JavaScript which defeats the point of this article! 🥲
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.
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.
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 😁
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.
Don't hide my comment, you prick.
Opera seams to support. Maybe not mini but that's a different browser.
For those who want to style the details element.
I've made a simple video about it youtu.be/CS2bsaFRECo
What about open/close animations? I think with it's not possible
Thank you for the idea :)
online-projects.paul-urian.ro/Proj...
LOVE IT!!
Some comments have been hidden by the post's author - find out more