<details class="accordion">
  <summary class="accordion-trigger">
    <span>Question title</span>
    <span class="accordion-icon">+</span>
  </summary>
  <div class="accordion-content">
    <p>Answer content goes here.</p>
  </div>
</details>

<style>
.accordion {
  border: 1px solid var(--border);
  border-radius: 0.625rem; overflow: hidden;
}
.accordion-trigger {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem; cursor: pointer; list-style: none;
  font-weight: 500;
}
.accordion-trigger::-webkit-details-marker { display: none; }
details[open] .accordion-icon { transform: rotate(45deg); }
.accordion-icon { transition: transform 0.2s; }
.accordion-content { padding: 0 1.25rem 1rem; color: var(--muted); }
</style>