roy2020china
12/10/2016 - 3:35 AM
From https://courses.edx.org/courses/course-v1:W3Cx+HTML5.1x+3T2016/courseware/b246c15d3a1044ccb4564ea22fbc4821/c991659e48ff4f7184ca5a7e19a5
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: http://jsbin.com/ifofib/3/edit And here is what is displayed after clicking on the small arrow-shaped icon to the left of the summary: Here is the code of this example:
<!DOCTYPE html> <html> <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: http://jsbin.com/ayojup/2/edit Step 1: all folded: Step 2: click on top level summary icon, the first "hidden" part appears... Step3: 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 There are CSS pseudo classes to style this icon when it is in the open or closed state. Support for these is still unofficial (works on Google Chrome). Examples adapted from: http://www.alsacreations.com/article/lire/1335-html5-details-summary.html (trial available in French language). Example1: http://jsbin.com/ifofib/46/edit 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 In this example: red arrow, white background.
summary::-webkit-details-marker { color:#FF0000; background:#FFFFFF; }
Once opened, the selector details[open] can style the icon when <details> is unfolded. In this example: blue arrow, turquoise background. Here is the corresponding CSS rule:
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 Example 2: http://jsbin.com/ifofib/8/edit CSS rules used in this example: 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 }