Back to Snippets

Animated Exclusive Accordion with Details Name CSS

Four questions sit in a list and only one can be open at a time. Opening a second question closes the first, the panel height animates instead of snapping, and the whole thing is HTML and CSS.

The exclusive behavior comes from giving every details element the same name attribute, which the browser treats as a group in the same way it groups radio buttons. The ::details-content pseudo-element exposes the collapsible part so it can take a transition, and interpolate-size set to allow-keywords lets that transition run from a height of zero to a height of auto, which CSS could not animate before. The summary keeps its native button semantics, so keyboard and screen reader users get the accordion for free.

The name attribute and ::details-content work in every current browser. interpolate-size is still Chromium only in 2026, so Firefox and Safari open the panels without the slide.

#css

#html

#accordion

#details

#faq

#animation

#ui

#accessibility

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: #f1f5f9;
  color: #0f172a;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.faq {
  width: 100%;
  max-width: 560px;
}

.faq h1 {
  font-size: 1.5rem;
  margin: 0 0 20px;
}

.item {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px -12px rgba(15, 23, 42, 0.2);
  margin-bottom: 10px;
  interpolate-size: allow-keywords;
}

.item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.item summary::-webkit-details-marker {
  display: none;
}

.item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-right: 4px;
}

.item[open] summary::after {
  transform: rotate(225deg);
  margin-top: 4px;
}

.item::details-content {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease, content-visibility 0.35s allow-discrete;
}

.item[open]::details-content {
  height: auto;
}

.body {
  padding: 0 20px 20px;
}

.body p {
  margin: 0;
  color: #475569;
  line-height: 1.65;
}

<section class="faq">
  <h1>Questions before you sign up</h1>
  <details class="item" name="faq" open>
    <summary>Can I change plans later?</summary>
    <div class="body">
      <p>Yes. Upgrades apply immediately and downgrades take effect at the end of the current billing period, so you never pay twice for the same month.</p>
    </div>
  </details>
  <details class="item" name="faq">
    <summary>Is there a free trial?</summary>
    <div class="body">
      <p>Every plan starts with a 14-day trial. No card is needed to begin and the workspace stays intact if you decide not to continue.</p>
    </div>
  </details>
  <details class="item" name="faq">
    <summary>What happens to my data if I cancel?</summary>
    <div class="body">
      <p>Your account switches to read-only for 30 days so you can export anything you need. After that the data is deleted from our servers and backups.</p>
    </div>
  </details>
  <details class="item" name="faq">
    <summary>Do you offer discounts for teams?</summary>
    <div class="body">
      <p>Teams of ten or more get 20 percent off the standard price. Nonprofits and schools can apply for a further reduction from the billing page.</p>
    </div>
  </details>
</section>

Animated Exclusive Accordion with Details Name CSS

Share Code Snippet