Skip to content

Instantly share code, notes, and snippets.

@hughker
Forked from joneff/details-summary.css
Created March 10, 2017 20:15
Show Gist options
  • Save hughker/65d2e3fa7c93f9861ebbcfb4beb28f13 to your computer and use it in GitHub Desktop.
Save hughker/65d2e3fa7c93f9861ebbcfb4beb28f13 to your computer and use it in GitHub Desktop.
details, summary {display: block;}
details:not([open]) > :not(summary) {display: none;}
<!doctype>
<html>
<head>
<title>Details element</title>
<style>
details, summary {display: block;}
details:not([open]) > :not(summary) {display: none;}
</style>
</head>
<body>
<details>
<summary>SUMMARY</summary>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
</details>
<script>
if (!("open" in document.createElement("details"))) {
var summaries = document.querySelectorAll("details > summary");
document.body.addEventListener("click", function(event) {
var target = event.target;
for (var i = 0, l = summaries.length; i < l; i++) {
if (target == summaries[i]) {
var parent = target.parentNode;
if (parent.hasAttribute("open")) {
parent.removeAttribute("open");
} else {
parent.setAttribute("open", "open");
}
}
}
}, false);
}
</script>
</body>
</html>
if (!("open" in document.createElement("details"))) {
var summaries = document.querySelectorAll("details > summary");
for (var i = 0; i < summaries.length; i++) {
var summary = summaries[i];
summary.addEventListener("click", function() {
var parent = summary.parentNode;
if (parent.hasAttribute("open")) {
parent.removeAttribute("open");
} else {
parent.setAttribute("open", "open");
}
}, false);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment