Explaining the “Details” and “Summary” Elements

Lots of JavaScript libraries are developed to give us additional interactive widgets on websites. Equally, HTML5 has also interpreted a number of popular interactive components, making them into native web features. In this post, we are going to look into one such element called <details> (and in doing so the <summary> element) which gives us an interactive widget similar to an accordion.

Using `<details>` and `<summary>`

The <details> element can be used anywhere within the scope of the <body>. To give a simple example, we may add it this way:

1	<details>
2	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
3	</details>

The above example shows the <details> element containing a paragraph, highlighting its similarity to other HTML sectioning elements. It defines a semantic section which in turn may contain child elements, such as images together with the <figure> element, form elements like <input> and <textarea>, and even nesting other arrays of <details>.

The only significant different would be in how browsers display this element on the front-end. Supporting browsers like Chrome, Safari, and the latest version of Opera will display it with a little triangle and a Detail line at the side.

The <details> element works like an accordion widget in that the content within it will initially be hidden. Toggling the arrow, or clicking anywhere which horizontally aligns with the arrow, will reveal the hidden content. We are also able to highlight it using the Tab key and either the Space or the Enter key to toggle it.

Note: AccesibleCulture covered accessibility thoroughly in Screen Readers and details /summary.

The Open State

Having opened the details element, if you now look through at the source with dev tools you will find that the browser has appended the open attribute while it is in this state. We can actually add the open attribute into the<detail> manually to display the content open by default.

1	<details open>
2	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
3	</details>

The Summary Element

The <details> element ships along with an element called <summary>; these two are meant to be used in conjunction but using the <summary> element is totally optional.

So what happens when you do use it?

1	<details open>
2	<summary>Hello World</summary>
3	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
4	</details>

Given the above example, the default Detail will be replaced with the Hello World.

Nesting

As mentioned, the <details> element may contain other nested <details> elements, like so:

<details>
    <summary>Hello World</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
    <details>
        <summary>Hi, How are you?</summary>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
    </details>
</details>

This does present one visual issue (which wouldn't be the case with, say, nested lists) the browser default styling. As you can see below, the nested element is aligned to the left along with the parent which obfuscates the true hierarchy:

This is nonetheless easily addressed by adding some simple styles. So, let's see how we style these elements.

Styling Details With CSS

The <details> and <summary> elements can be styled just like any other block elements; select them through the element selector, a class, or an id and stack a pile of properties to style it.

details {
    padding: 15px;
    background-color: #f6f7f8;
    margin-bottom: 20px;
}

Additionally, you can use the attribute selector to specify styles for the open state.

1	details[open] {
2	/* the style goes here */
3	}

The <summary> element can also be styled. Speaking of which, if you hover over a clickable element such as a button or an anchor, the cursor will normally turn into a pointer. But that's not the case for the <summary> element which is also clickable. The cursor will instead turn into the text cursor, which feels slightly unnatural, hence you might want to revise the default style, defining the cursor as pointer like so.

1	summary {
2	cursor: pointer;
3	}

Styling the Triangle

And now for the question you've been dying to ask: can you style the little triangle? There's no standard yet, but Webkit has uses a pseudo-element for this purpose, ::-webkit-details-marker. Through this we are able to customize the default arrow styles such as the color, the background color, as well as the arrow size.

1	summary::-webkit-details-marker {
2	color: #fff;
3	background-color: #000;
4	}

Unfortunately, replacing the arrow directly through the ::-webkit-details-marker is not possible — at least, at the time of writing. The only viable course is to replace it by using the ::before or ::after.

summary::-webkit-details-marker {
    display: none;
}
summary:before {
    content: "\2714"; /* the new icon */
    color: #696f7c;
    margin-right: 5px;
}

Browser Support

Browser support for these two elements has been well improved in the last two years. Back in the 2011 and 2012, Chrome was the only browser capable of rendering <details> and<summary> — albeit the implementation suffered from some accessibility issues. Safari and Opera has only recently joined the club.

So, as far as supporting Firefox and Internet Explorer are concerned, there are a couple of polyfill options to mimic the functionality, such as one developed by Mathias Bynens, jQuery Details. Although this polyfill seemingly relies on jQuery, the file size is much smaller than the jQuery UI library counterpart.

Once implemented, style it just like always.

summary:before {
    content: "\25B8"; /* unicode character of the litle triangle  */
    color: #000;
    margin-right: 5px;
}

Further information about browser support can be found on caniuse.com.

Use Cases and Examples

You will likely have already have seen these elements in the wild. Whilst shopping online, for example, you may find some websites pack their products' lengthy descriptions in an accordion. Or else they might use it in the sidebar to filter results, like Payless, for example.

The <details> and <summary> element are also perfectly suitable for organizing FAQ items and feature list items typically found in a pricing table layout. I've created a demo which you can see here which you're free to abuse.

Conclusion

As Aaron Lumsden said in this post

"websites are becoming more data driven and app-like"

so this new element is very much appreciated. Someday, perhaps with the advent of web components, building a website or a webapp will be less dependent on JavaScript libraries when adding a simple widget like an Accordion.

So, have you ever used <details> and <summary> in your website?