Apple-Style Smooth Animated Accordion

The Apple-Style Smooth Animated Accordion is a cutting-edge UI component that achieves high-end animation results without a single line of JavaScript. Inspired by the sleek marketing pages of Apple, it utilizes the newest CSS specifications to solve the age-old problem of animating to height: auto while maintaining full accessibility through semantic HTML.

Core Technique

This implementation represents a major shift in how we build interactive components, moving logic from JavaScript to the browser’s native engine using four specific modern CSS features.

1. Animating to Auto: interpolate-size

Historically, CSS could not animate from a fixed height to auto. The new interpolate-size: allow-keywords property changes this, allowing the browser to calculate the transition between a closed state and the intrinsic content size.

:root {
  /* Enables height: auto animations globally */
  interpolate-size: allow-keywords; 
}

2. Styling the Internal Content: ::details-content

The ::details-content pseudo-element is a newly introduced selector that allows direct styling and transition management of the content hidden within the <details> tag. By applying transitions directly to this pseudo-element, we can control opacity and height independently during the expansion.

.control__item::details-content {
  opacity: var(--option-item-opacity, 0);
  height: var(--option-item-content-height, 0);
  transition-property: height, content-visibility, opacity;
  transition-duration: var(--td);
  /* Handles display/visibility swaps instantly */
  transition-behavior: allow-discrete;
}

3. Exclusive Accordion: The name Attribute

By adding a name="control" attribute to multiple <details> elements, they become part of an exclusive group. The browser automatically handles closing other open items when a new one is selected, mimicking traditional accordion behavior without any scripts.

4. Discrete Transitions

The transition-behavior: allow-discrete property is crucial here. It allows properties that typically don’t support interpolation (like display or content-visibility) to be transitioned, preventing the “jumpy” feeling when the browser switches the rendering state of the content.

Browser Support

This code represents the future of layout components. On supported browsers, it provides a native-level experience with minimal overhead. On older browsers, it gracefully degrades to a functional, non-animated semantic list.