Native Accordion

<style>
  .accordion {
    border: 1px solid #333;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    overflow: hidden;
  }
  .accordion-header {
    cursor: pointer;
    padding: 0.9rem 1rem;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e1e1e;
    user-select: none;
  }
  .accordion-header::-webkit-details-marker { display: none; }
  .accordion-header::after { content: '+'; font-size: 1.2rem; }
  details[open] .accordion-header::after { content: '−'; }
  .accordion-body {
    padding: 0.9rem 1rem;
    border-top: 1px solid #333;
    color: #aaa;
    line-height: 1.6;
  }
  .accordion-body p { margin: 0; }
  </style>

  <details class="accordion">
    <summary class="accordion-header">What is vanilla HTML?</summary>
    <div class="accordion-body">
      <p>Plain HTML, CSS, and JavaScript — no frameworks, no build tools. The web as it was designed.</p>
    </div>
  </details>

  <details class="accordion">
    <summary class="accordion-header">Why avoid frameworks?</summary>
    <div class="accordion-body">
      <p>Frameworks add complexity and dependencies. For many projects, the browser's built-in capabilities are more than enough.</p>
    </div>
  </details>

  <details class="accordion">
    <summary class="accordion-header">Is this actually faster?</summary>
    <div class="accordion-body">
      <p>Yes. Zero JS parsing, no hydration, no virtual DOM. Just HTML the browser already knows how to render.</p>
    </div>
  </details>