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
<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
<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 #BE0000; background: #E2E6E6; 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: 3</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.
0 Comments
Add your comment