How to Create an Accordion Using Only HTML and CSS

How to Create an Accordion Using Only HTML and CSS

Build accordions natively without JavaScript
Ferenc Almasi β€’ Last updated 2022 June 27 β€’ Read time 3 min read
  • twitter
  • facebook
HTML

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:

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

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:

Copied to clipboard!
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

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.

Looking to improve your skills? Check out our interactive course to master HTML from start to finish.
Master HTMLinfo Remove ads

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
  • twitter
  • facebook
HTML
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.