FAQs With Dashed Lines

Questions are organized into titled sections (Pricing, Agents, Legal in the demo). Each section displays its title followed by a stack of clickable FAQ items.

Clicking a question expands it with a smooth height animation. The plus icon rotates 45 degrees to form an X when active. Only one question can be open at a time across all sections.

Active items get a subtle background change with a shadow and ring border. Four dashed grid lines appear at the edges of the active card, extending slightly beyond the card boundaries with fade effects at the ends. The lines use CSS custom properties for easy color customization.

Clicking outside the FAQ container collapses any open question. The component handles dark mode with appropriate color adjustments for backgrounds, text, and the dashed line colors.