"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. FAQ sections, Table of Contents, and more.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. max-height and transition the height property to a large value when we expand the section. However, it may not properly work if the content is larger than the max-height.

So, here we create a CSS grid with a grid item. Then we transition the grid-template-rows property from 0fr to 1fr and the grid item transitions to its content height.

I used CSS clip-path and mix-blend-mode to animate the background and text color of the accordion. Each accordion has two pseudo-elements. We know that opacity, clip-path and, visibility are animatable CSS properties. So when the accordion is selected using the :target pseudo-class, we transition the clip-path circle radius to 200% of the ::before pseudo-element. When the accordion is not selected, we do the same with the ::after but this time with a delay. This creates an illusion as it appears to clip from inside.

Since the accordion's title is an anchor element, users can also navigate through the items with their keyboard.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I would highly recommend watching his video, where he beautifully explains the technique and points out how he discovered it. Also, read Keith J. Grant's post and Nelson Menezes's post on the same topic.