Section · FAQ

Animated FAQ accordion

by Informeek Studio Made with Claude 6 November 2026
Live Open and close the answers

The prompt

Claude · Claude Opus 5.5

Build an FAQ section titled "Questions, answered" with a short line inviting people to talk to the team, and a link. Below it, an accordion of four questions: cancelling at any time, the free trial, data security and changing plans later. Each answer opens smoothly with a plus icon that turns into a minus. Use native details and summary elements so it works with a keyboard. White background, thin dividers, one blue accent.

Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.

Use it in three steps

  1. Copy the prompt with the button above.
  2. Paste it into your tool, such as v0, Lovable, Bolt or Claude.
  3. Make it yours by replacing the questions with the ones your customers actually ask.

About this FAQ section design

This FAQ section design is deliberately quiet. White background, thin dividers and one blue accent let the questions do the work. Each answer opens smoothly, and the plus icon turns into a minus, so it is always clear which items are open.

It is built on native details and summary elements, which means it works with a keyboard and a screen reader without extra code. The heading area offers a way to reach a person, which is what people want when their question is not on the list.

Why the prompt works

  • It names the four questions, the ones that block sign-ups.
  • It asks for native elements, which brings accessibility for free.
  • It describes the icon change, a small cue that helps scanning.

When to use it

An FAQ like this belongs near pricing or at the bottom of a landing page, where the last objections come up before someone signs up.

The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.

Keep exploring

More prompts like this

See the collection →