Published Sep 9, 2021Updated May 27, 2022
Contribute to Docs
<details> semantic HTML element encapsulates the
<summary> element and any additional elements that are only visible when the
<details> element is in an open state.
There is a small triangle which shows the state of the element. By clicking on the element or using the space bar, the state can be toggled between revealing and hiding additional information.
<details> element can be in two states, closed and open:
- When in the closed state, only the content in the
<summary>element is visible.
- However, when the
<details>element is toggled into an open state, the
<summary>and any additional content inside the
<details>element are visible.
<details> element must contain a
<summary> element which will provide a label for the hidden additional details.
<details><summary>Summary Text Here</summary><!-- Extra content here --></details>
<!DOCTYPE html><html><head> </head><body><!-- The details element --><details><summary>Course Prerequisites</summary><p>This is where the additional information goes.</p><!-- This can also include any other content --></details></body></html>
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn HTML on Codecademy
Front-End EngineerFront-end engineers work closely with designers to make websites beautiful, functional, and fast.
Includes 34 Courses
With Professional Certification