Animated Accordion CSS: Smooth Expand/Collapse Without JavaScript

I still remember the first accordion I ever shipped. It worked, but the panels snapped open like a light switch, and a teammate quietly asked if it was broken. That tiny jolt is the exact problem animated accordion CSS solves, and the good news is that we can solve it today without writing a single line of JavaScript.

So in this guide I want to sit down with you and walk through Animated Accordion CSS the way I would explain it to a friend over coffee. We will look at why the old height trick never worked, the two modern animated accordion CSS techniques I actually use, the browser support story in 2026, and a pattern you can copy straight into your project.

We build the Poper Accordion widget so you never have to think about this, but I want this post to help you even if you never touch our tool. By the end, you should be able to build animated accordion CSS that feels smooth on every device.

Why Animated Accordion CSS matters more than it looks

An accordion is a small component, so it is easy to treat animation as decoration. I used to think that way too. Then I started measuring, and animated accordion CSS turned out to be a quiet performance and conversion lever.

The reason is simple. Every JavaScript-driven accordion adds script that the browser must download, parse, and run. According to the Web Almanac by HTTP Archive, the median site now ships around 500 KB of JavaScript, and that payload keeps climbing year over year ^[1]. Moving an accordion to animated accordion CSS removes one more script from that pile.

Speed is money here. A widely cited Deloitte study, "Milliseconds Make Millions," found that a 0.1 second improvement in mobile load time lifted retail conversions by 8.4% ^[2]. When I replace a JavaScript accordion with animated accordion CSS, I am buying back a slice of that load time for free.

Visitors are also less patient than they used to be. Google research notes that the chance of a bounce rises sharply as a page moves from one to four seconds of load time ^[3]. A lean animated accordion CSS component keeps you on the right side of that line.

The old way and why Animated Accordion CSS replaced it

For years, the only way to animate an accordion was a JavaScript hack. You measured the panel with scrollHeight, set an explicit pixel height, and transitioned to it. It worked, but it was fragile.

The problem is that CSS cannot transition to height: auto. So the JavaScript approach broke whenever the content changed, whenever a font loaded late, or whenever the viewport resized. Every team I joined had a slightly different patch for it. Animated accordion CSS exists today because the language finally gained real tools to handle unknown heights on its own.

That shift matters. With modern animated accordion CSS, the browser handles the math, the content can be any height, and there is no script to maintain. Let me show you the two methods I rely on.

Method 1: Animated Accordion CSS with grid-template-rows

This is my favorite animated accordion CSS technique because it works in every current browser. The trick uses CSS Grid. A collapsed row gets a height of 0fr, and an open row gets 1fr. Because both values are real numbers, the browser can smoothly transition between them.

Here is the full pattern. It uses the native details and summary elements for the toggle behavior, then layers animated accordion CSS on top for the smooth motion.

The markup is just as small. Each section wraps its body in a .panel grid container and a .panel-inner child.

That is the whole component. The grid row carries the animation, the inner element hides the overflow, and the content can be any height you want. This animated accordion CSS pattern has been stable in Chrome, Firefox, and Safari since 2023, so I treat it as my safe default.

1<style>
2.accordion {
3  max-width: 700px;
4  margin: 40px auto;
5  font-family: Arial, sans-serif;
6}
7 
8.accordion details {
9  border: 1px solid #ddd;
10  border-radius: 10px;
11  margin-bottom: 12px;
12  overflow: hidden;
13  background: #fff;
14}
15 
16.accordion summary {
17  list-style: none;
18  cursor: pointer;
19  padding: 18px 20px;
20  font-size: 18px;
21  font-weight: 600;
22  position: relative;
23}
24 
25.accordion summary::-webkit-details-marker {
26  display: none;
27}
28 
29/* Plus / minus icon */
30.accordion summary::after {
31  content: "+";
32  position: absolute;
33  right: 20px;
34  top: 50%;
35  transform: translateY(-50%);
36  font-size: 24px;
37  transition: transform 0.3s ease;
38}
39 
40.accordion details[open] summary::after {
41  content: "−";
42}
43 
44/* Animated panel */
45.panel {
46  display: grid;
47  grid-template-rows: 0fr;
48  transition: grid-template-rows 0.35s ease;
49}
50 
51.accordion details[open] .panel {
52  grid-template-rows: 1fr;
53}
54 
55.panel-inner {
56  overflow: hidden;
57}
58 
59.panel-content {
60  padding: 0 20px 20px;
61  color: #555;
62  line-height: 1.6;
63}
64</style>
65 
66<div class="accordion">
67 
68  <details>
69    <summary>What is an accordion?</summary>
70 
71    <div class="panel">
72      <div class="panel-inner">
73        <div class="panel-content">
74          An accordion is a collapsible content section used to hide and reveal information without taking too much space on the page.
75        </div>
76      </div>
77    </div>
78 
79  </details>
80 
81  <details>
82    <summary>Why use grid-template-rows?</summary>
83 
84    <div class="panel">
85      <div class="panel-inner">
86        <div class="panel-content">
87          Using CSS Grid allows the height animation to smoothly adapt to any content size without needing fixed max-height values.
88        </div>
89      </div>
90    </div>
91 
92  </details>
93 
94  <details>
95    <summary>Does this work in all browsers?</summary>
96 
97    <div class="panel">
98      <div class="panel-inner">
99        <div class="panel-content">
100          Yes. This animated accordion CSS pattern works in all modern versions of Chrome, Firefox, Safari, and Edge.
101        </div>
102      </div>
103    </div>
104 
105  </details>
106 
107</div>

Example -

Why grid-template-rows beats max-height

Many older tutorials animate max-height instead. I avoid that approach in any serious animated accordion CSS work. You have to guess a max-height larger than the real content, which makes the timing feel off, because the transition spends part of its duration animating empty space. The grid method has no guessing, so the animated accordion CSS motion always matches the real content height.

Method 2: Animated Accordion CSS with the details-content element

The newest animated accordion CSS approach is even cleaner. The browser now exposes a ::details-content pseudo-element, which is the hidden box inside every details tag. We can style and animate that box directly.

This method needs two extra pieces. The transition-behavior: allow-discrete property lets the browser animate properties that normally jump, and interpolate-size: allow-keywords lets it transition to height: auto.

I love how little code this animated accordion CSS version needs. There is no wrapper grid and no inner overflow element. The browser does everything. The catch is browser support, and that is worth a clear comparison.

1<style>
2  :root {
3    interpolate-size: allow-keywords;
4  }
5 
6  .accordion {
7    max-width: 720px;
8    margin: 40px auto;
9    font-family: Arial, sans-serif;
10  }
11 
12  .accordion details {
13    border: 1px solid #e5e5e5;
14    border-radius: 14px;
15    background: #fff;
16    margin-bottom: 12px;
17    overflow: clip;
18  }
19 
20  .accordion summary {
21    list-style: none;
22    cursor: pointer;
23    padding: 18px 20px;
24    font-size: 18px;
25    font-weight: 700;
26    position: relative;
27    user-select: none;
28  }
29 
30  .accordion summary::-webkit-details-marker {
31    display: none;
32  }
33 
34  .accordion summary::after {
35    content: "+";
36    position: absolute;
37    right: 20px;
38    top: 50%;
39    transform: translateY(-50%);
40    font-size: 22px;
41    transition: transform 0.3s ease;
42  }
43 
44  .accordion details[open] summary::after {
45    content: "−";
46  }
47 
48  /* New method */
49  .accordion details::details-content {
50    height: 0;
51    opacity: 0;
52    overflow: clip;
53    padding: 0 20px;
54    border-top: 1px solid transparent;
55 
56    transition:
57      height 0.35s ease,
58      opacity 0.25s ease,
59      content-visibility 0.35s allow-discrete;
60  }
61 
62  .accordion details[open]::details-content {
63    height: auto;
64    opacity: 1;
65    padding-bottom: 18px;
66    border-top-color: #eee;
67  }
68 
69  .accordion .content {
70    color: #555;
71    line-height: 1.65;
72    padding-top: 14px;
73  }
74 
75  .accordion .content p {
76    margin: 0 0 10px;
77  }
78</style>
79 
80<div class="accordion">
81  <details>
82    <summary>What is this method?</summary>
83    <div class="content">
84      <p>This uses the browser’s built-in details content box instead of adding a grid wrapper.</p>
85      <p>The accordion still works with native HTML toggle behavior.</p>
86    </div>
87  </details>
88 
89  <details>
90    <summary>Why is it cleaner?</summary>
91    <div class="content">
92      <p>There is no extra panel element, no inner overflow wrapper, and no manual height math.</p>
93      <p>The browser animates the content box directly.</p>
94    </div>
95  </details>
96 
97  <details>
98    <summary>What is the downside?</summary>
99    <div class="content">
100      <p>This is newer CSS, so support is not as universal as the grid-template-rows pattern yet.</p>
101    </div>
102  </details>
103</div>

Example -

Browser support for Animated Accordion CSS in 2026

Picking the right animated accordion CSS method comes down to which browsers your visitors use. Here is how the two approaches compare today.

The table makes my advice easy. If you need broad, dependable animated accordion CSS right now, ship method one. If you are happy for Firefox and Safari users to see an instant open while Chrome users see the slide, method two is a clean progressive enhancement. The MDN reference for ::details-content tracks the live support data if you want to recheck before you ship [4].

Accessibility still matters in Accordion

A smooth animation is not an excuse to drop accessibility. The nice thing is that building animated accordion CSS on top of details and summary gives you keyboard support, focus handling, and screen reader announcements for free, because those are native elements.

There is one rule I never skip. Some people set their device to reduce motion, and animated accordion CSS should respect that. I always wrap the transition in a media query so the motion turns off for anyone who asked for less of it.

With that block in place, the accordion still opens and closes correctly, it just skips the slide. That keeps your animated accordion CSS friendly to people with motion sensitivity, and it costs four lines.

When a No Code Accordion beats hand-written Animated Accordion CSS

I have shown you that animated accordion CSS is genuinely simple now. So when would I still reach for a tool instead of writing it myself?

The answer is upkeep. A hand-built animated accordion CSS component lives in your codebase forever. Someone has to test it after every browser update, restyle it for every brand refresh, and rebuild it when a non-developer wants to add an FAQ on a Shopify or WordPress page. That is where a widget earns its place.

The Poper Accordion widget gives you smooth animated accordion CSS behavior, correct accessibility, and a visual editor, with no code on the page you maintain. You drop it onto Shopify, WordPress, Webflow, Wix, Squarespace, or plain HTML, and the animation travels with it. If you want to see it in action, the Poper Accordion widget page shows the live patterns.

My honest rule of thumb: if you are a developer building one accordion on one page, hand-written animated accordion CSS is perfect. If you are a marketer, or you manage many pages across many sites, a widget will save you hours every month.

Wrap up: Animated Accordion CSS is finally easy

For most of my career, a smooth accordion meant fragile JavaScript and a height hack everyone secretly disliked. That era is over. Animated accordion CSS today is a small, readable block of styles that any browser can run.

Reach for the grid-template-rows method when you need wide support, and the ::details-content method when you want the least possible code. Build both on native details and summary tags, respect reduced motion, and your animated accordion CSS will feel smooth, stay accessible, and ship with zero JavaScript. That is the standard your visitors quietly expect, and now it is the easy path too.

References