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>.
2 thoughts on “It is now so easy to have hide/show text in your html page. Auto-twisties are here.”
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.
They are great, but somewhat sadly, they don’t work in-line, try putting them in a table and you’ll end up with blank lines, look at the end of the non-displayed source @ https://prino.neocities.org/blog/2020-05-11-42l.html , where I tried, in vain, to hide erroneous data until clicked on.