<details> HTML Tag
- What does
<details> HTML Tag
do? - The <details> element is used to pair a <summary> statement with additional related details. The <summary> is displayed, and a user can view or hide additional details by clicking on the summary.
- Display
- block
- Usage
- textual
Code Example
<details>
<summary>Visible Summary of Details</summary>
This part won't be visible until the user chooses to see it.
</details>
Visible Summary of Details
This part won't be visible until the user chooses to see it.What Sort of Details?
The details
element is appropriate for things like copyright notices and other bits of information that you want on your webpage, but don’t need to be immediately displayed for all to see. However, if you get creative with the element, there’s quite a bit more that can be done. For example, you could use details
as an easy FAQ solution if you don’t want to mess with jQuery accordions. How might that look? Let’s see what we can do with just a few lines of targeted CSS.
<style> .faq details { border: 1px solid #ddd; border-radius: 2px; margin: 10px; } .faq summary { font-weight: bold; background-color: #ddd; font-size: 1.2em; padding-left: 5px; } .faq p { font-size: .9em; margin-left: 25px; } </style> <div class="faq"> <details><summary>What is the meaning of life?</summary> <p>You don't mess around, do you? Wow. Let's see. The meaning of the word "life" is: the state of being alive. See what I did there? <wink>.</p> </details> <details><summary>Are you in your pajamas?</summary> <p>Well, isn't that a bit personal? I work from home! What do <em>you</em> think!</p> </details> <details><summary>Is this example over yet?</summary> <p>Yes. Yes it is. Are you happy?</p> </details> </div>
How will our browser handle that bit of HTML and CSS?
What is the meaning of life?
You don’t mess around, do you? Wow. Let’s see. The meaning of the word “life” is: the state of being alive. See what I did there? <wink>.
Are you in your pajamas?
Well, isn’t that a bit personal? I work from home! What do you think!
Is this example over yet?
Yes. Yes it is. Are you happy?
Browser Support for details
Not supported. | Not supported. | 45 | Not supported. | 9 | 34 |