HTML details Tag

HTML details: Main Tips

• The HTML <details> element generates a disclosure widget. In it, information can be either shown or hidden from users.
• A combination of <summary> and <details> HTML elements is frequently used.
• The <details> tags accept various content.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Use of details

HTML <details> sets a disclosure widget seen as a small triangle which can be manipulated to show or hide information.

By default, HTML <details> is false, meaning that content is hidden automatically.

<details>
  <summary>Copyright</summary>
  <p>- by your company</p>
  <p>Content governed by copyright.</p>
</details>

Note: the content of <summary> (if it is the first child) is the label for the disclosure widget the <details> tag HTML creates.

open

The open attribute makes contents of the <details> element visible. Internet Explorer and Microsoft Edge browsers do not support this attribute.

<details open>
  <summary>Click here to hide or show</summary>
  <p>- Visible by default</p>
</details>

Browser Support

Chrome

12+

Edge

-

Firefox

49+

IE

-

Opera

15+

Safari

6+

Mobile Browser Support

Chrome

All

Firefox

49+

Opera

14+

Safari

6.1+