Details & Summary Elements

<div class="details-container">
  <h3>FAQ Section</h3>
  <p class="description">Frequently asked questions with expandable answers</p>
  <details class="faq-item">
    <summary>What are details and summary elements?</summary>
    <p>They are native HTML elements that create collapsible/expandable content without JavaScript. The &lt;details&gt; element contains the content, and &lt;summary&gt; acts as the clickable heading.</p>
  </details>
  <details class="faq-item">
    <summary>Do I need JavaScript to use them?</summary>
    <p>No! They work natively in all modern browsers. You only need JavaScript if you want to add custom behaviors or animations.</p>
  </details>
  <details class="faq-item" open>
    <summary>Can I style them with CSS?</summary>
    <p>Yes! You can style both elements extensively with CSS, including the default disclosure triangle and the open/closed states.</p>
  </details>
  <div class="info-badge">
    ✓ Zero JavaScript required
  </div>
</div>
<p class="note">📝 Perfect for FAQ sections - no JavaScript needed!</p>

<div class="details-container">
  <h3>Styled Accordion</h3>
  <p class="description">Custom styling with icons and colors</p>
  <details class="accordion-item">
    <summary>🎨 Design Principles</summary>
    <div class="accordion-content">
      <ul>
        <li>Keep it simple and intuitive</li>
        <li>Use clear visual hierarchy</li>
        <li>Ensure keyboard accessibility</li>
      </ul>
    </div>
  </details>
  <details class="accordion-item">
    <summary>⚡ Performance Tips</summary>
    <div class="accordion-content">
      <ul>
        <li>Avoid heavy animations</li>
        <li>Use CSS transitions</li>
        <li>Test on mobile devices</li>
      </ul>
    </div>
  </details>
  <details class="accordion-item">
    <summary>🔒 Security Best Practices</summary>
    <div class="accordion-content">
      <ul>
        <li>Validate all user input</li>
        <li>Use HTTPS everywhere</li>
        <li>Keep dependencies updated</li>
      </ul>
    </div>
  </details>
  <div class="info-badge">
    🎨 Custom styled with CSS
  </div>
</div>
<p class="note">💅 Rich styling with emojis and custom borders</p>

<div class="details-container">
  <h3>Nested Disclosure</h3>
  <p class="description">Hierarchical content organization</p>
  <details class="nested-item">
    <summary>📁 Frontend Development</summary>
    <div class="nested-content">
      <details class="nested-item nested">
        <summary>⚛️ React</summary>
        <p>A JavaScript library for building user interfaces. Created by Facebook.</p>
      </details>
      <details class="nested-item nested">
        <summary>🅰️ Angular</summary>
        <p>A TypeScript-based framework by Google for building web applications.</p>
      </details>
    </div>
  </details>
  <details class="nested-item">
    <summary>📁 Backend Development</summary>
    <div class="nested-content">
      <details class="nested-item nested">
        <summary>🟢 Node.js</summary>
        <p>JavaScript runtime built on Chrome's V8 engine for server-side development.</p>
      </details>
      <details class="nested-item nested">
        <summary>🐍 Python</summary>
        <p>High-level programming language known for simplicity and readability.</p>
      </details>
    </div>
  </details>
  <div class="info-badge">
    📂 Hierarchical structure
  </div>
</div>
<p class="note">🌳 Perfect for nested menus and category trees</p>

<div class="details-container">
  <h3>Settings Panel</h3>
  <p class="description">Hide complexity by default</p>
  <details class="settings-item">
    <summary>⚙️ Advanced Settings</summary>
    <div class="settings-content">
      <label>
        <input type="checkbox" checked> Enable notifications
      </label>
      <label>
        <input type="checkbox"> Dark mode
      </label>
      <label>
        <input type="checkbox" checked> Auto-save
      </label>
      <label>
        <input type="range" min="0" max="100" value="75" id="volumeSlider">
        Volume: <span id="volumeValue">75</span>%
      </label>
    </div>
  </details>
  <div class="info-badge">
    🎛️ Progressive disclosure
  </div>
</div>
<p class="note">🔧 Great for hiding advanced options until needed</p>