<details> element demo
The <details> element
The <details> element specifies additional details that the user can view or hide on demand.
The <summary> element defines a visible heading for the <details> element.
The heading can be clicked to view/hide the details.
More information can be found e.g. here:
The details and summary elements
Semantic markup
<details role="group" open>
<summary role="button">Show/Hide me</summary>
<p>Some content ..... etc.</p>
</details>
Note 1:
There is no guarantee that the browser's implementation, or the polyfill implementation, will respect it's
child elements layout when toggeling the details. To preserve the child elements layout, always
wrap the child elements inside a block element, e.g. <div>.
<style>
.something-inlined {
display: inline;
padding: 8px;
}
.something-inlined--yellow {
background-color: yellow;
}
.something-inlined--green {
background-color: green;
}
</style>
<details role="group">
<summary role="button">Respect layout of child elements</summary>
<div>
<div class="something-inlined something-inlined--yellow">I'm inlined</div>
<div class="something-inlined something-inlined--green">Mee 2</div>
</div>
</details>
Note 2:
The <details> element currently has very limited cross-browser support.
To ensure support across all modern browsers, please consider using a polyfill or creating your own.
I wrote my own polyfill using the following sources
- https://github.com/jordanaustin/Details-Expander
- https://github.com/chemerisuk/better-details-polyfill
- http://codepen.io/stevef/pen/jiCBE
- http://blog.mxstbr.com/2015/06/html-details/
- http://html5doctor.com/the-details-and-summary-elements/
- http://zogovic.com/post/21784525226/simple-html5-details-polyfill
- http://www.sitepoint.com/fixing-the-details-element/
- https://www.smashingmagazine.com/2014/11/complete-polyfill-html5-details-element/
How to use the polyfill
Import the polyfill into your main javascript module.
import { polyfillDetails } from './js/polyfills/details/details';
If you load HTML fragments dynamically, e.g. in a single page application, then you must call the polyfill after loading the HTML.
polyfillDetails(content) // content is the parent node of the loaded HTML fragment
Simple usage
Click to show/hide details
The details are hidden after page load.
The open attribute
Click to hide/show details
The details are open after page load.
Nested elements
Question 1
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec non enim in turpis pulvinar facilisis. Ut felis.
No summary element in markup
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Event listener example
Hide me
The details element below is closed if this detail is open.
Show me
The details element above is closed if this detail is open.
Respect layout of child elements
There is no guarantee that the browser's implementation, or the polyfill implementation, of the <details>
element will respect it's child elements layout when toggeling the details. To preserve the child elements
layout, always wrap the child elements inside a block element, e.g. <div>.
Not wrapped inside <div>