W Group Site Navigation Aeronautics Pharma Railways Shipping

As I discussed in the article that introduced the tags, the details and summary elements are excellent ways to create accordion interfaces on web pages. Until recently, features like this have required a mass of . (Indeed, frameworks like JQuery UI have entire modules devoted to supporting them).

As I mentioned, there are a few issues to using details today, including lack of support in Firefox and IE. Thankfully, these are easy to solve with a combination of and a little JavaScript feature detection and DOM manipulation.

The HTML

<details id="example">
	<summary>W Group Site Navigation</summary>
	<a href="#">Aeronautics</a>
	<a href="#">Pharma</a>
	<a href="#">Railways</a>
	<a href="#">Shipping</a>
</details>

Adding support with feature detection

Placed at the bottom of your page, the script does two things. First, it initiates a simple feature check by attempting to create a <details> element with an open attribute in the DOM. If the check fails, the script adds a no-det class to the <details> element, with user clicks on the <summary> child of this element adding and removing an open attribute:

function supports_details() {
	if (!('open' in document.createElement('details'))) {
		return "no-details"; }
	}
function switchOpen() {
	if (details.getAttribute('open')) {
        details.removeAttribute('open');
	} else {
        details.setAttribute('open', 'open');
	}
}
if (supports_details() == "no-details" ) {
	var details = document.getElementById("det-container");
	var summary = details.firstElementChild;
    details.classList.add("no-det");
    summary.addEventListener("click", switchOpen, false);
}
supports_details;

Adding style

You can apply CSS to the details and <summary> elements in the same ways that you can to everything else. In this case, I'm using the addition of the no-det class to create an equivalent UI element for non-supporting browsers:

summary, details {
	display: block;
}
details {
	visibility: hidden;
	margin-left: 2rem;
}
details > summary {
	visibility: visible;
}
details.no-det summary::before {
	content: "►";
	padding-right: 5px;
	font-size: 1.2rem;
	transition: .6s linear;
	display: inline-block;
}
details.no-det[open] summary::before { 
	transform: rotate(90deg);
}
details[open] {
	visibility: visible;
}

This duplicates the functionality of the <details> and <summary> elements for all browsers. I’ve added a little more CSS to the version you can see at the top of this article; you can find the complete code for that example on CodePen.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/ILzid