Embedded Files
These elements have been introduced for displaying a foldable zone in an HTML document.
In the screenshot below, taken from the W3C specification page, the text next to the horizontal arrow is a <summary> element, and the text displayed when we click on the summary part, is the <details> element. This is a sort of "accordion" with foldable content.
The <details> element generates a simple widget to show/hide element contents, optionally by clicking on its child <summary> element.
Here is an example of what can be done using these elements (click to unfold and show details):
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>The details element</title>
</head>
<body>
<details>
<summary>How to beat the boss...spoiler alert !</summary>
<p> Just aim to the red spots near his eyes</p>
<p>Keep shooting at these spots until the eyes open, then hit quickly both eyes with your laser beam.</p>
</details>
</body>
</html>
CSS:
details {
display:block;
width:300px;
margin:10px 0;
}
summary {
display:block;
background:#99B92C;
color:white;
border-radius:5px;
padding:5px;
cursor:pointer;font-weight:bold;
}
summary::-webkit-details-marker {
color:#FF0000;
background:#FFFFFF;
}
details[open] summary::-webkit-details-marker {
color:#0000FF;
background:#00FFFF;
}
summary::-webkit-details-marker {
display: none
}
summary:after {
content: "+";
color: #FF00FF;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -5px 5px 0 0;
padding: 0;
text-align: center;
width: 20px;
}
details[open] summary:after {
content: "-";
color: #FFFFFF
}
JavaScript:
(function(e,t){function r(e){var t=null;if(e.firstChild.nodeName!="#text"){return e.firstChild;}else{e=e.firstChild;do{e=e.nextSibling;}while(e&&e.nodeName=="#text");return e||null;}}function i(e){var t=e.nodeName.toUpperCase();if(t=="DETAILS"){return false;}else if(t=="SUMMARY"){return true;}else{return i(e.parentNode);}}function s(e){var n=e.type=="keypress",r=e.target||e.srcElement;if(n||i(r)){if(n){n=e.which||e.keyCode;if(n==32||n==13){}else{return;}}var s=this.getAttribute("open");if(s===null){this.setAttribute("open","open");}else{this.removeAttribute("open");}setTimeout(function(){t.body.className=t.body.className;},13);if(n){e.preventDefault&&e.preventDefault();return false;}}}function o(){var e=t.createElement("style"),n=t.getElementsByTagName("head")[0],r=e.innerText===undefined?"textContent":"innerText";var i=["details{display: block;}","details > *{display: none;}","details.open > *{display: block;}","details[open] > *{display: block;}","details > summary:first-child{display: block;cursor: pointer;}",'summary:before{content: "▶ ";}',"details[open]{display: block;}"];f=i.length;e[r]=i.join("\n");n.insertBefore(e,n.firstChild);}if("open"in t.createElement("details"))return;var n=function(){if(t.addEventListener){return function(t,r,i){if(t&&t.nodeName||t===e){t.addEventListener(r,i,false);}else if(t&&t.length){for(var s=0;s<t.length;s++){n(t[s],r,i);}}};}else{return function(t,r,i){if(t&&t.nodeName||t===e){t.attachEvent("on"+r,function(){return i.call(t,e.event);});}else if(t&&t.length){for(var s=0;s<t.length;s++){n(t[s],r,i);}}};}}();var u=t.getElementsByTagName("details"),a,f=u.length,l,c=null,h=t.createElement("summary");h.appendChild(t.createTextNode("Details"));while(f--){c=r(u[f]);if(c!=null&&c.nodeName.toUpperCase()=="SUMMARY"){}else{c=t.createElement("summary");c.appendChild(t.createTextNode("Details"));if(u[f].firstChild){u[f].insertBefore(c,u[f].firstChild);}else{u[f].appendChild(c);}}l=u[f].childNodes.length;while(l--){if(u[f].childNodes[l].nodeName==="#text"&&(u[f].childNodes[l].nodeValue||"").replace(/\s/g,"").length){a=t.createElement("text");a.appendChild(u[f].childNodes[l]);u[f].insertBefore(a,u[f].childNodes[l]);}}c.legend=true;c.tabIndex=0;}t.createElement("details");n(u,"click",s);n(u,"keypress",s);o();})(window,document);
Here is the code of this example:
<!DOCTYPE html>
<html lang="en"> ...
<body>
<details>
<summary>
How to beat the boss...spoiler alert !
</summary>
<p> Just aim to the red spots near his eyes</p>
<p>Keep shooting at these spots until the eyes open, then hit quickly both eyes with your laser beam.</p>
</details>
</body>
</html>
The <summary>...</summary> is inside a <details>...</details> element. By clicking on the icon at the left of the summary, the content of the <details> value is displayed/hidden.
<details> blocks can be embedded inside one another, like in this example below:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>The details element - embedded blocks</title>
<meta charset="utf-8"/>
</head>
<body>
<details>
<summary>How to beat the boss...spoiler alert !</summary>
<p> Just aim to the red spots near his eyes</p>
<p>Keep shooting at these spots until the eyes open, then hit quickly both eyes with your laser beam.</p>
<details>
<summary>Bonus and spoiler No 2: get a new weapon by cutting the tail of the boss</summary>
<p>Before finishing him, try to cut his trail, you will get a new weapon</p>
<p>Just try to stay behind him as long as you can, hitting his tail with your melee weapon, after a few hits the trail will fall and you will get a new bonus weapon, then finish the boss.</p>
</details>
</details>
</body>
</html>
CSS:
details {
display:block;
width:300px;
margin:10px 0;
}
summary {
display:block;
background:#99B92C;
color:white;
border-radius:5px;
padding:5px;
cursor:pointer;font-weight:bold;
}
Step 1: click on top level summary icon, the first "hidden" part appears...
Step 2: click on embedded summary icon inside the part that has been previously unfolded
Source code of this example, see the summary/details inside another one:
<details>
<summary>
How to beat the boss...spoiler alert !
</summary>
<p> Just aim to the red spots near his eyes</p>
<p>Keep shooting at these spots until the eyes open, then hit quickly both eyes with your laser beam.</p>
<details>
<summary>
Bonus and spoiler No 2: get a new weapon by cutting the tail of the boss.
</summary>
<p>Before finishing him, try to cut his trail, you will get a new weapon</p>
<p>Just try to stay behind him as long as you can, hitting his tail with your melee weapon, after a few hits the trail will fall and you will get a new bonus weapon, then finish the boss.</p>
</details>
</details>
CSS pseudo classes for styling summary icons
CSS pseudo classes for styling summary icons
There are CSS pseudo classes to style this icon when it is in the open or closed state.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Details - Styling summary icons</title>
<meta charset="utf-8"/>
</head>
<body>
<details>
<summary>How to beat the boss...spoiler alert !</summary>
<p> Just aim to the red spots near his eyes</p>
<p>Keep shooting at these spots until the eyes open, then hit quickly both eyes with your laser beam.</p>
</details>
</body>
</html>
CSS:
details {
display:block;
width:300px;
margin:10px 0;
}
summary {
display:block;
background:#99B92C;
color:white;
border-radius:5px;
padding:5px;
cursor:pointer;font-weight:bold;
}
summary::-webkit-details-marker {
color:#FF0000;
background:#FFFFFF;
}
details[open] summary::-webkit-details-marker {
color:#0000FF;
background:#00FFFF;
}
summary::-webkit-details-marker {
display: none
}
summary:after {
content: "+";
color: #FF00FF;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -5px 5px 0 0;
padding: 0;
text-align: center;
width: 20px;
}
details[open] summary:after {
content: "-";
color: #FFFFFF
}
The color and background of the icon on the left are specified by the following CSS rule, which uses the pseudo class ::-webkit-details-marker
Once opened, the selector details[open] can style the icon when <details> is unfolded.
details[open] summary::-webkit-details-marker {
color:#0000FF;
background:#00FFFF;
}
It is also possible to change the icon itself using the CSS pseudo class :after
Use a "+" shaped icon, pink, bold, etc. :
summary:after {
content: "+";
color: #FF00FF;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -5px 5px 0 0;
padding: 0;
text-align: center;
width: 20px;
}
Use a "-" shaped icon, white, when details are displayed:
details[open] summary:after {
content: "-";
color: #FFFFFF
}
External resources:
External resources:
From the specification:
The summary element
The details element
On CanIUse: compatibility table for details and summary elements
Page updated
Google Sites
Report abuse