HTML details Tag: How to Toggle Hidden Content

The <details> tag hides content and shows it when needed. It helps organize long pages. The tag shows extra info only when the user clicks.

Understand the <details> Tag in HTML

The <details> tag toggles extra content. It hides info by default and shows it when clicked. This tag helps keep pages clean and focused.

The tag wraps content that stays hidden. You can add a clickable title using the <summary> tag.

Here is an example:

<details>
  <summary>Click to read more</summary>
  <p>This is hidden content.</p>
</details>

The <summary> tag acts as the toggle label. It’s the only visible part until the user clicks.

<details>
  <summary>Details</summary>
  <p>Extra content here.</p>
</details>

Here are its use cases:

• FAQs
• Technical data
• Long explanations
• Optional content that may distract users if shown by default.

To keep content open by default, add the open attribute to <details>.

<details open>
  <summary>Visible by default</summary>
  <p>This content is already open.</p>
</details>

The <details> and <summary> tags work in most modern browsers. It includes many browsers such as:

• Chrome
• Edge
• Firefox
• Safari

Old versions of IE do not support it.

How to Style <details> and <summary> with CSS

Use CSS to change toggle styles and hover effects. This improves clarity and user experience.

details {
  padding: 10px;
  border: 1px solid #ccc;
}

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

Nest Content Inside <details>

You can include paragraphs or images. Or even another <details> block. Nested content also stays hidden until opened.

<details>
  <summary>Section</summary>
  <p>Intro text</p>
  <details>
    <summary>More details</summary>
    <p>Nested content here.</p>
  </details>
</details>

Examples of the <details> Tag in HTML

Toggle FAQ Section:

<details>
   <summary>What is HTML?</summary>
   <p>HTML is the markup language for web pages.</p>
</details>

This shows a basic FAQ-style toggle. Users click the question to view the answer. It works well for help pages and user guides.

Product Features Panel:

<details>
   <summary>View Product Features</summary>
   <ul>
      <li>Waterproof</li>
      <li>Bluetooth 5.2</li>
      <li>10-hour battery</li>
   </ul>
</details>

This uses a list inside <details>. The summary acts as a headline. It’s useful on product pages for optional specifications.

Nested Code Explanation:

<details>
   <summary>JavaScript Example</summary>
   <p>Click below to see the code:</p>
   <details>
      <summary>Show Code</summary>
      <pre><code> function greet(name) { return 'Hello ' + name; } console.log(greet('Sam')); </code></pre>
   </details>
</details>

This shows a nested structure. The first layer explains, and the second layer contains actual code. Useful for tutorials or docs.

Wrapping Up

In this article, you learned what the <details> tag does and how to use it with <summary>. You also saw how to style it and nest content.

Here is a quick recap:

• <details> toggles visibility
• <summary> creates the toggle button
• Use open to show by default
• CSS can style both tags
• Nest is possible
• It’s well-supported in modern browsers

FAQs

Similar Reads