Accordion and FAQ

<div class="faq">

  <details name="faq" open>
    <summary>Does linen shrink?</summary>
    <div class="answer">
      <p>A little on the first wash, which is why good linen is pre-washed before it is cut.
      Ours loses about two percent and then stays put.</p>
    </div>
  </details>

  <details name="faq">
    <summary>Can I tumble dry it?</summary>
    <div class="answer">
      <p>You can, on low. Line drying keeps the fibres softer for longer, and linen dries faster
      than almost anything else, so it is rarely worth the machine.</p>
    </div>
  </details>

  <details name="faq">
    <summary>Why does it crease so much?</summary>
    <div class="answer">
      <p>Because the fibre is stiff and hollow, which is the same reason it is cool to wear.
      Creasing is a property of the cloth, not a defect in it.</p>
    </div>
  </details>

  <details name="faq">
    <summary>How should I store it?</summary>
    <div class="answer">
      <p>Folded and loose, somewhere dry. Long spells on a wire hanger stretch the shoulders,
      and plastic covers trap moisture.</p>
    </div>
  </details>

</div>

* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 system-ui, -apple-system, sans-serif; padding: 24px; background: #fff; }

.faq {
  max-width: 620px;
  margin: 0 auto;
  border: 1px solid #e2e7ef;
  border-radius: 12px;
  overflow: hidden;
}

details + details { border-top: 1px solid #e2e7ef; }

summary {
  display: flex;               /* also removes the default triangle */
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-size: .98rem;
  font-weight: 500;
  color: #16202e;
  cursor: pointer;
  list-style: none;            /* Firefox */
  user-select: none;
}

summary::-webkit-details-marker { display: none; }   /* older Safari */

summary:hover { background: #f6f8fb; }
summary:focus-visible { outline: 2px solid #3b4fe4; outline-offset: -2px; }

/* the chevron */
summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 2px solid #8593ab;
  border-bottom: 2px solid #8593ab;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}

details[open] > summary { background: #f6f8fb; }
details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.answer { padding: 0 20px 18px; color: #5b6b83; font-size: .94rem; }
.answer p + p { margin-top: 12px; }

/* smooth open and close, where the browser supports interpolating to auto */
details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .24s ease, content-visibility .24s allow-discrete;
}

details[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  summary::after { transition: none; }
  details::details-content { transition: none; }
}