HTML Reveal-Close Without JavaScript, CSS Optional
Tap for a Summary of What This Is About
When you tapped the above summary text, this content was revealed. Tapping it again, hides this text.
No JavaScript is used for the functionality. CSS is optional. Read the article for information about how to implement this for your website.
If you have not yet tapped the above summary text, do it now.
Your browser or email reader probably put some kind of indication next to the above summary text to indicate it is a special line. Perhaps it used the ▸ triangle pointer to attract your attention.
Here is the source code for the above illustration. The HTML elements and what they do are discussed afterward.
<details> <summary> Tap for a Summary of What This Is About </summary> <p> When you tapped the above summary text, this content was revealed. Tapping it again, hides this text. </p> <p> No JavaScript is used for the functionality. CSS is optional. Read the article for information about how to implement this for your website. </p> </details>
The entire function is between the <details> and </details> elements.
The part between the <summary> and </summary> elements is what shows on the web page when the page loads. The rest of it displays when the summary text is tapped.
CSS may be used to design the content. Here is the same HTML and content but with added CSS.
Tap for a Summary of What This Is About
When you tapped the above summary text, this content was revealed. Tapping it again, hides this text.
No JavaScript is used for the functionality. CSS is optional. Read the article for information about how to implement this for your website.
The border and padding is added in the <details> element. The italicized summary text is applied in the <summary> element.
Here is the source code of the second illustration.
<details style="border:1px solid #999; border-radius:.5em; padding:.5em;"> <summary style="font-style:italic;"> Tap for a Summary of What This Is About </summary> <p> When you tapped the above summary text, this content was revealed. Tapping it again, hides this text. </p> <p> No JavaScript is used for the functionality. CSS is optional. Read the article for information about how to implement this for your website. </p> </details>
As you can see, no JavaScript is used.
This reveal-close functionality can be used anywhere it is desired to reveal text only on request, perhaps to avoid an appearance of excessive text or a cluttered page.
An example of use is an FAQ page.
Another example is presented in the Expandable Menu Items Without JavaScript Willmaster Library article, which uses the details and summary tags to create expandable menu items.
This HTML hide-reveal functionality works well without JavaScript.
(This content first appeared in Possibilities newsletter.)
Will Bontrager
