Open navigation menu

Details and Summary Disclosure

Uses native details and summary elements to create accessible expandable content sections without JavaScript, with custom styling.

HtmlForm Validation

Code

snippet
<details>
  <summary>Click to expand</summary>
  <p>This content is hidden by default and shown when the summary is clicked.</p>
</details>

<details open>
  <summary>FAQ: What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard markup language for web pages.</p>
</details>

<details>
  <summary>Settings</summary>
  <form>
    <label>
      <input type="checkbox" name="notifications" checked>
      Enable notifications
    </label>
    <label>
      <input type="checkbox" name="auto-save">
      Auto-save changes
    </label>
    <button type="submit">Save Settings</button>
  </form>
</details>

<details>
  <summary>Code Example</summary>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}</code></pre>
</details>

<style>
  summary {
    cursor: pointer;
    padding: 0.5rem;
    font-weight: bold;
    list-style: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  details[open] > summary {
    border-bottom: 1px solid #ccc;
  }
</style>

Related Examples