Click me to show the rest of the information. Go on, click me
This text is hidden until the summary line is clicked.
This is done using
<details><summary> This is displayed</summary>this is hidden until the summary is clicked</details>
So easy and impressive isn’t it. You used to have to set up scripts etc to do this. Now it is built in. Of course, you’ll need to format the summary so it looks clickable.
Note: Another technique, the accordion, requires a java script for it to work. <details… works without java script.
You can also have hover test using <span title = “hovertext”>displayed text</span>.
And if you’ve got anyone still using Internet Explorer or pre-Chromium Edge browsers, check out https://github.com/rstacruz/details-polyfill for a simply way to allow it to work on those two browsers which don’t support it.
LikeLike