Fancy FAQ Accordion

Parent / child element

Fancy FAQ Accordion

An accordion of questions and rich-text answers in seven designs. Show it in one or two columns, pick the toggle icon, and choose which items are open when the page loads.

  • Seven designs: Classic, Minimal, Bordered, Filled, Shadow, Side Line and Pill
  • One or two columns of questions
  • Plus / minus, chevron, arrow or no toggle icon
  • Open the first item, or any item, by default
  • Rich-text answers with links, lists and media
  • Accessible buttons with expanded state for screen readers

Designs

7 designs

Columns

1 or 2

Toggle icons

Plus / minus, chevron, arrow

Classic

Minimal

Bordered

Filled

Shadow

Side Line

Pill

All seven designs share the same question and colour settings. Switch between them with the Design option.

Example of fancy FAQ accordion in two columns with chevron icons…

Example of fancy FAQ accordion with a second item open by default and larger questions…

Yes. We build on Avada with reusable sections, and train your team before launch.

Example of fancy FAQ accordion with a dark header and no toggle icon…

Use cases

01

Shipping, returns and payment questions on a storeโ€™s help or product page.

02

Pricing page FAQs that answer trial, refund and plan-change questions before sign-up.

03

Service FAQs for agencies and studios, set in two columns beside a contact form.

Key features

What the element does, in plain terms. Every individual control is listed in the settings reference below.

Layout

Seven designs

Classic, Minimal, Bordered, Filled, Shadow, Side Line and Pill, each built from the same question settings.

One or two columns

Show the questions in a single column or split them across two. On small screens two columns stack into one.

Items

Questions and answers

Each item has a question and a rich-text answer that accepts formatting, links, lists, media and shortcodes.

Open by default

Open the first item automatically, or force any single item open when the page loads.

Behaviour

Toggle icons

Show a plus and minus, a chevron, an arrow or no icon on each question.

Accessible markup

Each question is a button with expanded state and a linked answer region, so keyboards and screen readers can use it.

Styling

Typography

Separate font settings for the questions and the answers.

Colour controls

Question, answer, accent, header background and border colours.

Settings reference

Every setting the element exposes, grouped by builder tab. Options are listed where the setting offers a fixed set of choices.

Structure General tab

Design

Classic ยท Minimal ยท Bordered ยท Filled ยท Shadow ยท Side Line ยท Pill

The visual style of the accordion. Default Classic.

FAQ Items

Child elements

Add, reorder, clone or remove questions. Each item has its own settings, listed below.

Columns

1 Column ยท 2 Columns

Shows the questions in one or two columns. Default 1 Column.

Icon Style

Plus / Minus ยท Chevron ยท Arrow ยท None

The icon shown on the toggle button. Default Plus / Minus.

First Item Open

Yes ยท No

Expands the first item when the page loads. Default No.

Element Visibility

Small ยท Medium ยท Large screen

Shows or hides the element on small, medium or large screens.

CSS Class

Adds a class to the wrapping HTML element.

CSS ID

Adds an ID to the wrapping HTML element.

Typography General tab

Question Typography

Font family, weight, size, line height, letter spacing

Font settings for the questions.

Answer Typography

Font family, weight, size, line height, letter spacing

Font settings for the answers.

FAQ Item Child element, one per question

Question

Text

The question shown on the toggle button.

Answer

Rich text

The answer, which accepts formatted text, links, lists and media.

Open by Default

Yes ยท No

Forces this item open when the page loads, whatever the parent setting. Default No.

Colours Design tab

Question Color

Colour. Default #1a1a1a

The text colour of the questions.

Answer Color

Colour. Default #555555

The text colour of the answers.

Accent Color

Colour. Default #65bc7b

The colour of the icon and the open-item highlight.

Header Background

Colour. Default #f7f7f7

The background of the question row in the Classic, Filled, Shadow and Pill designs. Not used by Minimal.

Border Color

Colour. Default #e0e0e0

The colour of the separator lines or item borders.

Previous

Fancy Comparison Table

Next

Fancy Case Study

On this page

Related

Want the questions to appear in Google results too? Add Fancy Schema Markup with the FAQ type on the same page.