faq-accordion

Summary

Sober black-on-white FAQ accordion. Each row is the question on the left in headline weight, a plus/minus toggle on the right, hairline divider between rows. Click a row to expand the answer underneath. No icons, no colored chips, no "we're here to help" decoration — pure content.

HTML structure (minimal)

<section class="faq">
  <header class="faq__head">
    <p class="eyebrow">FAQ</p>
    <h2 class="faq__title">Common questions.</h2>
  </header>
  <ul class="faq__list">
    <li class="faq__item">
      <details>
        <summary>
          <span>How quickly can you start?</span>
          <span class="faq__toggle" aria-hidden="true">+</span>
        </summary>
        <div class="faq__answer">
          <p>Usually within a week. Pilot scopes start sooner if your tooling is already accessible.</p>
        </div>
      </details>
    </li>
    <li class="faq__item">
      <details>
        <summary>
          <span>What does a pilot look like?</span>
          <span class="faq__toggle" aria-hidden="true">+</span>
        </summary>
        <div class="faq__answer"><p>Two weeks, one workflow, fixed scope. We ship something real or we don't continue.</p></div>
      </details>
    </li>
    <!-- … -->
  </ul>
</section>

Key SCSS tokens

.faq {
  padding: 96px 32px;
  font-family: "Instrument Sans", system-ui, sans-serif;
}
.faq__title {
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 56px;
}
.faq__list { list-style: none; padding: 0; margin: 0; max-width: 880px; }
.faq__item { border-bottom: 0.5px solid rgba(0, 0, 0, 0.12); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.3px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__toggle {
  font-size: 20px;
  font-weight: 500;
  transition: transform 0.2s ease;
}
.faq__item details[open] .faq__toggle { transform: rotate(45deg); }
.faq__answer {
  padding: 0 0 24px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 64ch;
}

Animation logic

// Optional smoothing — native <details> already animates the disclosure if you
// allow `interpolate-size: allow-keywords` (CSS), otherwise toggle a class:
document.querySelectorAll('.faq__item details').forEach((d) => {
  d.addEventListener('toggle', () => {
    d.classList.toggle('is-open', d.open);
  });
});

Notable details

• Built on native <details> / <summary> — accessible by default, zero JS required.
• Plus glyph rotates 45° to become an X on open, instead of swapping to a minus — cheap rotation on a single character carries the state-change.
• Question type size (24px) is one rung below the section title (60px), making each row feel like a sub-section heading rather than an FAQ row.
• Hairline-only chrome, no fills — the FAQ becomes a quiet content block instead of a "support" widget.

Use when

• B2B services where prospects have specific concerns (timeline, scope, pricing) you want to address inline.
• Pages where the FAQ is supportive content, not a primary feature — design has to recede.
• You want maximum accessibility with minimum framework dependency.

Caveats

• Native <details> doesn't animate height smoothly across all browsers — the toggle is instant unless you opt into interpolate-size.
• summary { list-style: none } is needed in WebKit/Blink and the marker pseudo-element is needed in some Safari versions.
• "Plus rotates to X" only works if you keep the toggle as text (a + glyph) — swap to an SVG and you have to animate it differently.