How to Create an Accordion Using Only HTML and CSS

If you need to create accordions, you don't need to use hundreds of lines of JavaScript anymore, you can use the native HTML details element for that:

<details open>
    <summary>Section 1</summary>
    <section>...</section>
</details>
<details>
    <summary>Section 2</summary>
    <section>...</section>
</details>
accordion.html
Copied to clipboard!

It comes with some additional HTML tags and attributes. For example, a summary must be provided inside each details element. This is the only section that is visible to the user by default. Everything else is hidden behind a toggle.

The details element also has an open attribute that defines whether the element is toggled on, or off. By default, this is how it looks when the browser's default style is applied to it. You can open each detail by clicking on the summary:

Section 1
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 2
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 3
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Styling the Accordion

To make it more appealing, we can add some CSS styles to make it resemble the classic jQuery accordion. All we need is 30 lines of CSS:

details {
    &[open] {
        summary {
	    border: 1px solid #003eff;
    	    background: #007fff;
	    color: #FFF;
	}
    }
	
    summary {
        background: #f6f6f6;
	color: #454545;
	border: 1px solid #c4c5c5;
	border-radius: 3px;
	padding: 8px;
	margin-bottom: 2px;
	cursor: pointer;
		
	&::marker {
	    font-size: 14px;
	}
    }
	
    section {
	padding: 32px 16px;
	border: 1px solid #dddddd;
	border-radius: 3px;
        margin-bottom: 2px;
    }
}
accordion.scss
Copied to clipboard!

Note that the ::marker pseudo-element references the triangle in front of the summary.

We can use the [open] selector to style the accordion differently when it is toggled on. This will create an accordion similar to the one below:

Section 1
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Section 2
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
Section 3
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
  • List item one
  • List item two
  • List item three

Caveats

We have to note that there are some caveats when it comes to native HTML accordions. First of all, there's no built-in way to keep only a single details element open from many. The same is true for animations. There's no way to natively animate them at the time of writing. To animate the toggle, you would still need to use JavaScript.

There are also limited options to style the default ::marker. What you can do instead, is completely hide it and replace it with your own custom element.


Summary

Support-wise, it is over 90% globally, and only IE and Opera Mini are unsupported at the moment. If you would like to get the full source code in one piece, I have it hosted on Codepen, you can clone it from there.

How to Build Native Accordions in HTML
If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for HTML
Remove ads
Remove ads

πŸ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. β˜•

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
πŸŽ‰ Thank you for subscribing to our newsletter. x