Skip to main content Accessibility Feedback

JavaScript-free accordions

Yesterday, one of my students tipped me off to the details and summary elements, which can be used to create accordions without JavaScript.

<details>
	<summary>Overview</summary>
	<ol>
		<li>Cash on hand: $500.00</li>
		<li>Current invoice: $75.30</li>
		<li>Due date: 5/6/19</li>
	</ol>
</details>

Here’s what it looks like in action.

If you want the element to be open, you can add the open attribute to the details element.

<details open>
	<summary>Overview</summary>
	<ol>
		<li>Cash on hand: $500.00</li>
		<li>Current invoice: $75.30</li>
		<li>Due date: 5/6/19</li>
	</ol>
</details>

Styling these elements is pretty straightforward, except for the expand/collapse triangle. My buddy Scott O’Hara also wrote about this technique, and shared some useful styling tips.

/**
 * 1. Styling for Firefox and other non-webkit/blink browsers
 * 2. Styling for webkit and blink
 */
summary, /* 1 */
summary::-webkit-details-marker { /* 2 */
	list-style-image: url('');
}

My student was lamenting that this element has no support in IE or Edge. This strikes me as the perfect type of thing to progressively enhance.

Older browsers will treat those elements like div’s and leave the content visible and expanded, while supporting browsers get the enhanced accordion functionality.

Edge is moving to webkit, and will therefore add support this in the future. There’s also a polyfill.

Scott also looked at how screen readers handle these elements (tl;dr: quite well), and is worth a read.