Our HTML5 is full of wonderful surprises, isn’t it? ? One of them is an accordion you can make – without using JavaScript. In this exercise we’ll go trough everything you’ll need to create one of your own, and don’t worry, it’s dead simple ?
Table of contents:
How does it work?
We’ll set a opening and closing <details> tag wherever we want to create an accordion. This feature is perfect for F.A.Q sections ?
<details> is a wrapper, it holds everything together. Within it we will set our content and <summary> tags as well. After we’ve set our <summary> we can start adding in anything else that we want to add to the body.
<summary> on the other hand has a more important function. It acts as a title, it’s the text that we click on and then everything expands. Summary will have a little arrow next to it which will on click event point downwards.
After setting both of these, we’d want to know if we can style them and the answer is yes we can ?
Let’s get started!
How to set up <details> and <summary>?
<details>
<summary> Summary is our title </summary>
<p> Here we can start adding things that will make the body of our accordion:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<ul>
<li> You can add a List Item </li>
<li> And another List Item </li>
<li> And maybe just one more List Item </li>
</ul>
<button> You can add a button </button>
<sub> *you can add whatever you want ? </sub>
</details>
Above you can see a simple example of adding a title (or a question if you’re making F.AQs), a couple of paragraphs, a list and a button to our accordion.
Let’s style them up a bit ?
How to style <summary> and it’s arrow?
- To style summary on it’s own (doesn’t include the arrow)
summary {
color: blue;
}- To style summary arrow (on it’s own):
summary::-webkit-details-marker {
color: blue;
}- To style summary AND arrow (together):
summary,
summary::-webkit-details-marker {
color: blue;
/* remove the outline if you wish */
outline: none;
}As you can see it’s pretty simple, BUT, it does not work everywhere:
The only browser that doesn’t support this are the Microsoft ones (and Opera Mini which makes sense—it doesn’t really do interactive).
CSS-Tricks
But even then, it’s just like all the sections are opened, so it’s not a huge deal.
CSS-Tricks
If you’d like to see how this looks in practice head over to CodePen:
No JavaScript Accordion | HTML5 by Likii (@likiipedia) on CodePen.
