HTML <details> Tag

What is the <details> Tag?

The <details> tag is a fantastic feature in HTML that lets you create collapsible sections on your web page. It’s incredibly handy when you want to hide information until the user decides to view it. Think about FAQs, extra information sections, or even spoiler alerts in articles!

This tag, when paired with the <summary> tag, lets you build an interactive component. Users can click on the summary, and the hidden content will expand, showing more information.

How Does the <details> Tag Work?

At its core, the <details> tag is straightforward to use. Here’s a basic example:

<details>
  <summary>Click to reveal more information</summary>
  <p>This is the content that stays hidden until you click on the summary above.</p>
</details>

Here’s what happens:

• The summary part (inside <summary>) is always visible.
• Clicking on the summary toggles the visibility of the content inside the <details> tag.

Why Use the <details> Tag?

The <details> tag comes in handy for a variety of situations:

• FAQs: You can use it to show questions and their answers in a collapsible format.
• Hiding Long Content: If you have long explanations or detailed instructions, you can keep them hidden until users want to read them.
• Spoiler Alerts: It’s a great way to hide spoilers in blog posts or articles, so readers can choose to reveal them.

Real-Life Examples of the <details> Tag

Example 1: FAQ Section

<details>
  <summary>What is the return policy?</summary>
  <p>Our return policy allows you to return items within 30 days of purchase for a full refund.</p>
</details>
<details>
  <summary>Do you offer free shipping?</summary>
  <p>Yes, we offer free shipping on orders over $50.</p>
</details>

Example 2: Spoiler Alert

<details>
  <summary>Show Spoiler</summary>
  <p>The main character survives in the end!</p>
</details>

Styling the <details> Tag with CSS

By default, the <details> tag is plain, but you can easily style it to match your website’s design. Here’s how:

<style>
  details {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  summary {
    font-weight: bold;
    cursor: pointer;
  }

  details[open] {
    background-color: #f9f9f9;
  }
</style>

<details>
  <summary>Click to learn about styling</summary>
  <p>The background color changes when the section is expanded.</p>
</details>

Nested <details> Tags

You can even nest <details> tags to create more complex sections. For example:

<details>
  <summary>Parent Section</summary>
  <p>This is the main section.</p>
  <details>
    <summary>Child Section</summary>
    <p>This is the nested section.</p>
  </details>
</details>

Accessibility Benefits

One great thing about the <details> tag is that it’s accessible by default. Screen readers can recognize the expand/collapse functionality, making your content easier to navigate for visually impaired users.

Browser Support

The <details> tag is supported in most modern browsers, including Chrome, Edge, Firefox, and Safari. If you’re targeting older browsers, you may need a fallback solution using JavaScript.

Final Thoughts

The <details> tag is a simple yet powerful feature that makes your website more interactive and user-friendly. Whether you’re building an FAQ, hiding spoilers, or organizing long content, this tag gets the job done without needing complex scripts. Try it out in your next project—you’ll love how easy it is to use!