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 JavaScript. (Indeed, frameworks like JQuery UI have entire modules devoted to supporting them).

As I mentioned in the previous article, there are a few issues to using details today, mostly around lack of support in and Microsoft Edge. Thankfully, these are easy to solve with a combination of CSS and a little JavaScript feature detection and DOM manipulation.

The HTML

<details id="det-container">
    <summary>Mainframe</summary>
    <a href="#">Park</a>
    <a href="#">Hosts</a>
    <a href="#">Storylines</a>
    <a href="#">Recalls</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, details a {
	display: block;
}
details.no-det summary::before { 
  content: "►";
  padding-right: 5px;
  font-size: 1.2em;
  transition: .6s linear;
  display: inline-block;
}
details.no-det[open] summary::before { 
  transform: rotate(90deg); 
}
details.no-det a {
  display: none;
}
details[open].no-det a { 
  display: block;
}

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 on the associated CodePen.

Photograph by Wolfgang Staudt, used under a Creative Commons Attribution-NonCommercial 2.0 Generic license

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