Albino Blacksheep

Animated CSS-only FAQ

by Steven Lerner

This FAQ module includes all the basics. Click on the automatically-numbered question to reveal an answer. Clicking another question to reveal another answer closes the previously opened answer on newer browsers.

Frequently Asked Questions

  1. What should I include with a FAQ on my site?

    People want to see their question answered, not some made-up questions, so keep it real by including real questions and honest answers. No one asked this question though. Not to a human, at least.

  2. Why would I want a FAQ from Albino Blacksheep?

    Many FAQ components are janky, unintuitive and resource-heavy. I wanted to build a simple one that works as expected in all screen sizes and is pleasing to use.

  3. How does the animation work without any JavaScript?

    CSS has evolved to allow animation between keywords, in this case, between height:0; and height:auto;. There is a little more to it as well.

  4. How does the numbering work?

    Each question and answer is enclosed in a list-item, and a CSS counter is used to automatically display the number.

  5. Is this compatible with Google Rich Content for SEO?

    Yes.