HTML <details> Tag

The <details> tag creates an interactive disclosure widget, allowing users to expand or collapse a section of content. This is commonly used to hide less critical information, reduce clutter, and provide an enhanced user experience by revealing content only when needed. It’s an accessible alternative to custom JavaScript solutions for collapsible content.

Syntax

<details open>
  <summary>Summary text</summary>
    Content to be revealed
</details>

Attributes

Example

<details>
  <summary>Click here to see details</summary>
  <p>This is the content revealed when the summary is clicked.</p>
</details>

More Examples

Basic Collapsible Section

This demonstrates a simple usage of the <details> and <summary> tags.

<details>
  <summary>Simple Details</summary>
  <p>This is a basic hidden paragraph.</p>
</details>

Details With Multiple Elements

You can include multiple elements inside the <details> tag.

<details>
    <summary>Advanced Details</summary>
    <p>Here is a list of items:</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <p>That's all folks!</p>
</details>

Pre-opened details

By adding the open attribute, the details section will be expanded when the page loads.

<details open>
  <summary>Initially Open Details</summary>
  <p>This content is visible when the page loads.</p>
</details>

Details within details

You can nest details elements for multi-layered content reveal.

<details>
  <summary>Main Details</summary>
    <p>Some initial content.</p>
    <details>
        <summary>Sub Details</summary>
            <p>More content, hidden initially.</p>
    </details>
</details>

Using with other content like images

<details>
  <summary>Show Image</summary>
  <img src="https://placekitten.com/200/300" alt="Cute Kitten">
  <p>A cute kitten image.</p>
</details>

Browser Support

The <details> tag is supported in all modern browsers:

• Chrome: Yes
• Edge: Yes
• Firefox: Yes
• Safari: Yes
• Opera: Yes

Older browsers may not support it or have inconsistent behavior.

Notes and Tips

• Accessibility: The <details> tag is naturally accessible, as it uses semantic HTML, meaning it’s easily navigable with keyboards and screen readers.
• Customization: You can use CSS to style the appearance of the <details> and <summary> elements to match your website’s design. This is especially useful for changing the look of the default triangle indicator.
• Semantic Structure: Always use a <summary> tag inside a <details> tag. The <summary> tag acts as a label for the collapsible content and provides a crucial point for users to understand what they are interacting with.
• Progressive Enhancement: The <details> tag is a great example of progressive enhancement. If a browser doesn’t support it, the content will still be visible, ensuring the user will not miss any information.
• Avoid overuse: Do not use <details> and <summary> if you need complex toggle logic or have too many nested elements. For such cases, a JavaScript implementation might be a better approach for performance and maintainability.
• Use Cases: Excellent for FAQs, legal disclosures, product details, and any other content that can be hidden initially to improve page clarity.
• SEO Implications: Content inside <details> tags is still readable by search engines. It is not treated differently in terms of SEO. But keep the most critical info visible by default for faster access.
• JavaScript Interaction: While the <details> element works without JavaScript, you can listen for the “toggle” event to run custom JavaScript logic when the element opens or closes.
  “`javascript
  document.querySelectorAll(‘details’).forEach(detail => {
  detail.addEventListener(‘toggle’, event => {
  if (event.target.open) {

  console.log('Details are opened');
  

  } else {

  console.log('Details are closed');
  

  }
  });
  });