Code Snippet Library

In HTML code, you can pair <details> and <summary> tags together to create a show/hide toggle. The default is the closed state where users can select whether to toggle open a hidden area to reveal additional content. One example might be a single show/hide, such as a question with a hidden answer where the user can select a small triangle that will rotate to reveal the answer. Another example might be an accordion list where content is collapsed into a set of topics so that the user can expand each in turn.

Basic Show/Hide Toggle

Select the arrow to see the hidden content.

Visible text

Hidden content.

Basic Show/Hide Toggle Code

<details>
    <summary>Visible text</summary>
    Hidden content.
</details>

Copy this code and replace the filler text with your content. The other styles in this module use this same code with added visual styling to create accordions and buttons.

Show/Hide With Ordered List

Question 1: In what year was Penn State founded?

1970
1776
1855
1890

Self-Check Answer

Answer: C. 1855

Code: Show/Hide With Ordered List Self-Check

<p>Your question</p>
<ol style="list-style-type: lower-alpha;">
    <li>Answer 1</li>
    <li>Answer 2</li>
    <li>Answer 3</li>
    <li>Answer 4</li>
</ol>
<details style="border: 1px solid #314D64; background: #f1f1f0; font-size: 100%; overflow: auto; width: 30%;">
    <summary style="margin-left: 2%;">Self-Check Answer</summary>
    <p style="margin-left: 15px; font-size: 100%;">Answer: C. 1855</p>
</details>

Modifications and Guidelines

Modify or remove the border around the answer.
Change the background color.
Change the font size.
Change the width of the answer box (this example uses a width of 30%, which is fine for this short answer, but use a wider box (width: 80%; or width: 100%;) more content.
Change the list style.

Cautions on Use

Use sparingly when appropriate for small amounts of information or text-only content.
Using images or other multimedia elements inside the <details> tags is not recommended, but you can combine these tags with lists or tables.