You are here:

home>playground>details summary elements

New-to-me Elements

I'm on a journey to improve my understanding of building accessibility, to make doing so second nature with every site that I build. I've been updating my business website, AMDesigned to improve the accessibility, and general design, and in doing so I've come across a few 'new to me' HTML elements. They are, so far, elements that I haven't felt were missing from my development skills, but perhaps that's simply because I haven't had exposure to them.

The basic details and summary elements

There are some downfalls with the vanilla HTML elements, such as having the text cursor point when a user hovers on the <detail> element. This fails to indicate that the element is interactable. There's also no distinction between the <summary> styling and the rest of the contents of <detail>, although that may be just a personal preference for me.

Test 1

This is some dummy text to test out these elements. Below we can see how an unordered list works as well.

• item one
• item two
• item three

Adding minimal styling

Here I've added just a touch of styling, using CSS Tricks post about styling the details element as a jumping off point. I used a <div> inside the <detail> element to group all the expanded contents together for easier styling.

details {
	 background: hsl(var(--highlight), 60%);
	 border: 1px solid hsl(var(--highlight), 60%);
	 padding: 0.4rem;
	 cursor: pointer;
}
 
summary {
	 padding: 0.8rem;
	 color: hsl(var(--base), 100%);
}

div {
	 display: grid;
	 row-gap: 1.6rem;
	 background: hsl(var(--base), 100%);
	 padding: 0.8rem;
}

This little bit of styling gives a nice containerised feeling to the element, adds in that missing pointer cursor and distinguishes between the <detail> and <summary> elements

Test 2

This is some dummy text to test out these elements. Below we can see how an unordered list works as well.

• item one
• item two
• item three

A More Accessibile Details/Summary Combo

For this expansion on the original elements, I've used an <h3> for the text inside the <summary> to indicate that it's a title of the grouping. I styled the <h3> to match the other titles as there's no need for it to visually be so different. As mentioned in the CSS Tricks write up linked above, the <h3> does require display: inline in order to display correctly. Otherwise the <h3> displays on a new line, below the triangle toggle indicator.

summary h3 {		
		display: inline;
		font-size: 1.8rem;
		font-weight: 400;
	}

Test 3

This is some dummy text to test out these elements. Below we can see how an unordered list works as well.

• item one
• item two
• item three

More functionality options?

After playing around with these for a little bit I realised there were a few more changes I personally would prefer, though I will have to do some more research into whether they're best practices, or cause any issues for users. I would prefer that when the <details> element is clicked, that the element is closed. Otherwise the user must scroll back up to find the <summary> to close close the element. However as I'm writing this I realise that this would interfere if a user wanted to copy text, or click a link within the expanded text.

In that case another option would be to have a close button at the bottom of the <summary> section so the user could control that themselves. OR another option would be to have some javascript in place to detect when one is clicked while another is open, and automatically close the other. Buuuuut sometimes you might want more than one open, right? Plus I prefer the user has control over what's happening on their screen, than us developers assuming what is best for their experience.

details button {
	 appearance: none;
	 border: 1px solid hsl(var(--base), 100%);
	 text-transform: uppercase;
	 color: hsl(var(--base), 100%);
	 background: transparent;
	 width: 100%;
	 padding-block: 1.2rem;
	 cursor: pointer;
}

And an inline onclick:

onclick="this.parentElement.removeAttribute('open')"

Now with a close button

This is some dummy text to test out these elements. Below we can see how an unordered list works as well.

• item one
• item two
• item three

Close

Marker appearance

You can also change the ::marker, which to be honest I think was the main reason why I was looking into styling in the first place. But the more I use it the more I enjoy the native triangle (at least on Chrome on Windows), and I think it does a decent job of showing the toggle. However here's a link to more styling options in case others are interested. I do kinda love the idea of using it as dropdown menu. Their post is from 2014, but the styling information seems to still be current. They talk about these elements not being very widely accepted in different browsers, but it seems 9 years changes a lot.