HTML <details> Element

Publish in HTML Tutorial el 23/05/2025 20:21

The <details> element creates a disclosure widget that contains information that is initially hidden but can be revealed by the user. It's a native HTML way to create collapsible content without JavaScript. The element works with a nested <summary> tag that serves as the clickable header.

Basic Syntax

Here's the basic structure of a <details> element:

And here's how it renders:

Play Code

<details>
  <summary>Click to expand</summary>
  <p>Hidden content revealed when expanded</p>
</details>

Examples

1. Basic FAQ Section

A common use case for <details> is creating FAQ sections without JavaScript.

Play Code

<details>
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard markup language for creating web pages.</p>
</details>
<details>
  <summary>Is details supported in all browsers?</summary>
  <p>Most modern browsers support it, but some older ones might need polyfills.</p>
</details>

2. Nested Details Elements

You can nest <details> elements to create hierarchical structures.

Play Code

<details>
  <summary>Main Category</summary>
  <details>
    <summary>Subcategory 1</summary>
    <p>Content for subcategory 1</p>
  </details>
  <details>
    <summary>Subcategory 2</summary>
    <p>Content for subcategory 2</p>
  </details>
</details>

3. Details with Custom Styling

The <details> element can be styled with CSS for better visual appearance.

Play Code

<style>
  details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5em;
    margin-bottom: 1em;
  }
  summary {
    font-weight: bold;
    cursor: pointer;
    padding: 0.5em;
  }
  details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
  }
</style>

<details>
  <summary>Styled Details Element</summary>
  <p>This content appears with a nice animation when opened.</p>
</details>

4. Details with JavaScript Interaction

You can enhance <details> with JavaScript for additional functionality.

Play Code

<details id="logDetails">
  <summary>Click me and check console</summary>
  <p>This element logs events to the console.</p>
</details>

<script>
  const details = document.getElementById('logDetails');
  details.addEventListener('toggle', (event) => {
    console.log(`Details element is now ${details.open ? 'open' : 'closed'}`);
  });
</script>

5. Accordion with JavaScript

Create an accordion where only one item can be open at a time.

Play Code

<div class="accordion">
  <details>
    <summary>First Item</summary>
    <p>Content for first item</p>
  </details>
  <details>
    <summary>Second Item</summary>
    <p>Content for second item</p>
  </details>
  <details>
    <summary>Third Item</summary>
    <p>Content for third item</p>
  </details>
</div>

<script>
  document.querySelectorAll('.accordion details').forEach(detail => {
    detail.addEventListener('toggle', () => {
      if (detail.open) {
        document.querySelectorAll('.accordion details').forEach(other => {
          if (other !== detail) other.open = false;
        });
      }
    });
  });
</script>

Tips and Tricks

Use the open attribute to make a details element expanded by default: <details open>
The toggle event fires when the state changes between open and closed
You can style the marker (triangle icon) using ::marker pseudo-element
For better accessibility, ensure your summary text clearly indicates there's expandable content
Consider adding a small transition for the content reveal for better UX

Browser Support

The <details> element is supported in all modern browsers, but for older browsers like Internet Explorer, you might need a polyfill. Always test your implementation across target browsers.