Frequently Asked Questions Accordion

The left column displays a large heading. The right column contains the accordion items separated by divider lines. Only one item can be open at a time, controlled by state that tracks the currently open question.

Icons animate between plus and minus states using CSS transforms. The plus icon rotates 90 degrees and scales to zero while the minus icon does the inverse, creating a smooth crossfade effect. The transition duration is 200ms.

Answers animate in height and opacity using Framer Motion's AnimatePresence. The container uses overflow-hidden during the animation to clip content smoothly. Each FAQ item is fully clickable for easier interaction.

Works for product documentation, help centers, support pages, and any site section that needs to answer common questions concisely.