HTML5 Accordions: Super easy, super fast website accordions with no plugins and only basic HTML!

Last Updated on July 15, 2021 by admin

I just learned this amazing new HTML 5 trick that can save you lots of time and really help with organizing information on your site. If you’ve ever created accordions on your website before then you know what I’m talking about. We (the general “website developers” we…) use them to condense a lot of information into a small space while still making it easy to access and digest. Often you will see accordions used for a FAQ section on a website. Up until now we have had to use plugins or JavaScript to get accordions to work. Now, HTML 5 has a new trick up its sleeve! Follow along to learn about HTML 5 accordions!

Our Raw Data

Let’s come up with a fake FAQ to use for this tutorial.  Let’s talk about spelunking:

Q1:  What is spelunking?
A1:  Spelunking is the hobby or practice of exploring caves, especially for fun. This can also be called caving.

Q2:  What equipment do you need to go spelunking?
A2:  You need to wear a good quality helmet, a good headlamp, backup flashlights, a coverall or caving suit, knee pads, elbow pads, gloves, appropriate underwear, and good caving boots. Most cavers also bring a caving backpack with some essential tools (compass, first aid kit, knife, snacks, etc.).

Q3:  Is spelunking dangerous?
A3:  Caving (spelunking) can be dangerous! Some of the dangers you might face are hypothermia, rockfall / cave-in, drowning, exhaustion, and pockets of bad air (or no oxygen). With the proper preparation and gear, you can greatly offset the risk. Never go spelunking alone–always go with at least one other person. Also, be sure to let others know where you will be and when you are expected to return.

NOTE:  I know nothing about spelunking and I found that information by typing the question into Google and taking the first answer that came up.

So putting questions/answers like that is fine and it will work…but what if you have 50 questions? That would be a LONG page and not very convenient for readers.

Let’s Make An Accordion

This is so easy you’re going to be all like “WHUUUUT!?!?” All you need is two HTML tags:

<details>

and

<summary>

To make one accordion, you just combine these two like so:

<details>
<summary>What is spelunking?</summary>
<p>Spelunking is the hobby or practice of exploring caves, especially for fun.  This can also be called caving.</p>
</details>

Notice that your <details> tag wraps the whole question & answer set while your <summary> tag only wraps the question inside the <details> tag. You want more? Just stack them on top of each other!

<details>
<summary>What is spelunking?</summary>
<p>Spelunking is the hobby or practice of exploring caves, especially for fun.  This can also be called caving.</p>
</details>

<details>
<summary>What equipment do you need to go spelunking?</summary>
<p>You need to wear a good quality helmet, a good headlamp, backup flashlights, a coverall or caving suit, knee pads, elbow pads, gloves, appropriate underwear, and good caving boots. Most cavers also bring a caving backpack with some essential tools (compass, first aid kit, knife, snacks, etc.).</p>
</details>

<details>
<summary> Is spelunking dangerous?</summary>
<p>Caving (spelunking) can be dangerous!  Some of the dangers you might face are hypothermia, rockfall / cave-in, drowning, exhaustion, and pockets of bad air (or no oxygen).  With the proper preparation and gear, you can greatly offset the risk. Never go spelunking alone--always go with at least one other person.  Also, be sure to let others know where you will be and when you are expected to return.</p>
</details>

If you put that into the code of the page, it looks like this:

Yeah…it does work. Just click on the questions to expand them. It’s that simple. Cool, eh? Looks pretty stupid, though.  Let’s add some formatting.

CSS-ify This Thing!

This is not a CSS tutorial so I’m going to give you the code I think works well and you can go look up your own styles.

First, wrap your entire accordion with a <div> and give it a unique class. Mine looks like this:

<div class="accordionFAQ">
   ...all those "details" and "summary" sections from above go here...
</div>

Then, add the CSS styling (to your site’s style.css file) that you think is appropriate.

.accordionFAQ {
margin-left: 10%;
margin-bottom: 10%;
}

.accordionFAQ summary {
cursor: pointer;
font-size: 120%;
font-weight: bold;
}

.accordionFAQ summary:before {
content: "\02192\0000a0\0000a0";

.accordionFAQ summary:hover {
text-decoration: underline;
}

My CSS styling above adds margins, changes the cursor, changes the font size & weight, creates the right arrow and spaces before each question, and adds underlining on hover. Ultimately, it makes the accordion look like this:

That’s It. You’re Done.

Seriously, it’s that easy. Of course, you can tinker with the styling all day long but, generally speaking, just a few lines of HTML and you’ve got a functioning HTML 5 accordion. While you’re at it, don’t forget to add FAQ schema to your page as well!

If you’ve got other cool HTML 5 tricks let me know! Make a comment or reach out. I’m always up for learning new things!