Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteFor a CSS-only accordion card that grows to fit its content without a guessed maximum height, use native <details> and <summary> for the disclosure, then animate a one-row CSS Grid wrapper from 0fr to 1fr. An inner wrapper with min-height: 0 and overflow: hidden lets the row collapse. For newer browsers, interpolate-size: allow-keywords can enable transitions to intrinsic sizes such as auto, but it is not yet broadly available and should be treated as an enhancement.
Build the disclosure with native HTML
<details> and <summary> provide a disclosure control that works without JavaScript. Use the summary as the visible card header and put the content after it inside the details element. The browser handles the open/closed state; CSS can style the card and animate its revealed panel. See MDN’s <details> reference for the element’s behavior.
<details class="card">
<summary class="card__title">What is the answer?</summary>
<div class="card__panel">
<div class="card__inner">
<p>Place the expandable content here.</p>
</div>
</div>
</details>Keep focus styling visible. In particular, do not apply clipping to the summary or to the element that draws its focus indicator.
Animate content height with a grid track
A single grid row can transition between a collapsed zero fraction and an expanded fraction. The nested inner element needs min-height: 0 so it can shrink below its content’s natural size, and overflow: hidden clips the content while the track closes.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.card__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 250ms ease;
}
.card[open] .card__panel {
grid-template-rows: 1fr;
}
.card__inner {
min-height: 0;
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.card__panel {
transition-duration: 0.01ms;
}
}The 250ms duration is an example, not a required value. Adjust it to suit the design, and honor reduced-motion preferences. This grid-track pattern avoids choosing a maximum height in advance; test it with long content and narrow layouts before shipping.
When to use intrinsic-size interpolation
In browsers that support it, interpolate-size: allow-keywords opts into transitions between a length or percentage and an intrinsic size such as auto. It does not make transitions between two intrinsic size keywords interpolable. MDN currently labels the property limited availability and not Baseline, so it should not be the only way the panel works. Check MDN’s interpolate-size reference and current browser compatibility data before relying on it.
Chrome’s guide describes combining interpolate-size with ::details-content to animate a disclosure’s content: Animate elements on entry and exit. This approach can reduce wrapper markup, but depends on support for both the intrinsic-size interpolation and the pseudo-element styling. Unsupported browsers need a usable fallback, such as the grid-track pattern or content that opens without an animation.
Choose a technique and fallback deliberately
| Consideration | Grid track, 0fr to 1fr |
Intrinsic-size interpolation |
|---|---|---|
| Disclosure semantics | Use native <details> and <summary>; the grid technique only handles the panel’s visual size. |
Can style a native disclosure’s content, for example with ::details-content; it does not replace the need for a disclosure control. |
| Markup and CSS | Uses an outer grid panel and a shrinkable, clipping inner wrapper. | Can animate intrinsic sizing without the grid-row wrapper, but requires the relevant CSS features. |
| Browser behavior | Presented as a compatibility-minded technique in the implementation guidance; test the browsers you support. | interpolate-size is limited availability and not Baseline according to MDN; support for ::details-content is a separate requirement. |
| Unsupported-browser fallback | Can be the animation approach, with the disclosure still based on native HTML. | Provide another animation technique or let the content open without animation. |
Avoid the common max-height: 999px workaround if the goal is a natural content-sized transition. It imposes an arbitrary ceiling and can make the apparent duration vary: short content reaches its actual height well before the oversized maximum. A universal transition from height: 0 to height: auto is not a safe assumption either; MDN notes that auto in animations can behave unpredictably across browsers and versions. See MDN’s transition reference.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Best Value
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Test the interaction, not just the animation
- Use the keyboard to operate the summary and confirm that its focus indicator is not clipped.
- Check both opening and closing with short and long content, including at narrow viewport widths.
- Test with reduced motion enabled and ensure the disclosure remains understandable when animation is minimized.
- Remember that changing a panel’s size changes layout: following content will move. Keep the animated region reasonably small and do not assume the effect is compositor-only.
- Check current browser compatibility for the exact CSS features you intend to use; feature support can differ between intrinsic-size interpolation and disclosure-content styling.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
