This tutorial shows you how to add an accordion to a FAQ page of frequently asked questions and answers. The “accordion” hides all the answers exposing only the questions. When you click on a question the answer is displayed (the accordion opens). Click again on a question and the answer disappears (the accordion closes)
Click the questions below to see an accordion FAQ in action.
What Is A FAQ?
A FAQ is a list of frequently asked questions, and the answers.
What Is An Accordion FAQ?
It is a way of just displaying the questions, and only exposing each answer when the user clicks the question.
What Are The Two Ways Of Creating FAQs?
- Use a Single Page – Create a page with the the title FAQ, on something similar, and add questions and answers where the question is a h3 header and the answer is a single paragraph.
- Use a FAQ Category – create a post category called FAQ, or something similar, and write a post every time you have a question. The post title should be the question,
and the content of the post is the answer.
Create Your FAQ Page
On your FAQ place each question in <h3> tags, and place each answer in a single paragraph or if you prefer within a single container element such as a <div>.
You can place an introduction or conclusion section on the page but only the questions and answers will form part of the accordion
Switch On The Accordion
Install the Genesis Club Pro Plugin.
Edit your FAQ page and click the checkbox to enable the Accordion as shown in the video below.
Accordion FAQ Features
- Enabled with a single click
- Can be applied to any page or post
- Can be applied to any category, subcategory, tag, author or custom taxonomy archive
- Can have as many accordions on the site as you like
- You can apply custom classes for the questions and answers to add your own unique styling
- You can use different custom classes on different accordions
- Only loads accordion script on the pages whether it is needed
