208 of 300

Conversion 03

FAQ

Questions that open one at a time, without script. The height animates on ::details-content over 220 ms.

Details elements with a shared name

  • One openEach question is a details element with the same name, so only one is open, and the browser search finds the answers.
  • HeightThe height animates with interpolate-size.
  • IconThe plus turns into a cross at once, because it shows a state.