About this snippet

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.

Size
2.6 KB
Uses
HTML, CSS
Loads
Nothing external
Views
27

Collections

Related snippets

<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>
*, *::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;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save