Yoast SEO – FAQ Accordion Plugin – show/hide answers (2 mins)

Want to create an interactive Frequently Asked Questions (FAQ) page? Want your content to show up prominently in Google?

Use this free plugin to build an awesome interactive FAQ page using Yoast FAQ block. The FAQs will display as an interactive accordion (collapsible content). The answers can be shown/hidden by clicking on the questions. The best part is that Google may decide to show your FAQs on the search page itself leading to a higher click-through rate, giving you the competitive edge against your rivals.

What does this accordion plugin do?

The Yoast FAQ block can be used to easily add sets of questions and answers to a post or page in WordPress (without using any code). The default FAQ Block is styled sparsely. We can convert it into an interactive accordion with collapsible headers that can be clicked to reveal the answers.

Before – With just Yoast SEO plugin

Yoast FAQ Block – Default Styles

After – with Accordion plugin installed

Yoast FAQ Animated Accordion showing show/hide answers when you click on question.
Yoast FAQ Animated Accordion

The FAQ block uses structured data (FAQ schema) – i.e. code that helps search engines understand that your post addresses a question posed by a user. It may also win you featured snippet like the one below in Search Engine Results Page (SERP).

How to add an FAQ block and style it like an accordion

Watch this video – Convert Yoast SEO FAQ Block Into An Accordion With This Free Plugin or follow the step by step instructions below.

Time needed:  5 minutes.

Need customs styles to suit your brand? I am happy to set this up for you, please contact me for a quote.

  1. Download FAQ Accordion Plugin

    The free plugin is available as a small zip file. Provide your email address (in form above).

  2. Install FAQ Accordion Plugin

    As illustrated below, to install the plugin:
    1. Select Plugins | Add New
    2. Select Upload Plugin
    3. Select Browse. Find and select the plugin.
    4. Select Install Now.

    Steps to Install FAQ Animated Accordion Plugin

  3. Activate FAQ Accordion Plugin

    Select Activate
    Important: Ensure that Yoast SEO plugin is installed and activated.

    Activate FAQ Animated Accordion Plugin

  4. Go to a page or post and select the + add block button

    Once you select the +add block button, the FAQ block can be found by searching for FAQ or under Yoast Structured Data Blocks.
    Yoast provides two structured date blocks, the FAQ block and the How-to block.

  5. Add question and answer text

    The intuitive FAQ block allows you to enter a question and its answer.
    You can also add an image or additional questions. The FAQ block adds the necessary structured data markup to make your content more accessible to Google.
    Add question and answer text. You can also add an image or additional FAQs.
    For more information, refer to How to build a structured data-powered FAQ page using Yoast SEO.

  6. Done.

    The FAQs are styled as a simple show/hide accordion. You can set up such FAQ blocks on multiple pages or posts.

    Yoast FAQ Animated Accordion showing show/hide answers when you click on question.

Frequently Asked Questions (FAQs)

An example FAQ accordion styled to fit with my brand – with some questions you may have.

What is an accordion?

The accordion is a graphical control element comprising a vertically stacked list of items. Each item can be “expanded” or “collapsed” to reveal the content associated with that item.
The term stems from the musical accordion in which sections of the bellows can be expanded by pulling outward.
For more information, refer to https://en.wikipedia.org/wiki/Accordion_(GUI).

What is structured data?

Structured data is code in a specific format so that search engines can read the code and use it to display search results in a specific and much richer way. For more information, refer to https://yoast.com/what-is-structured-data/

Schema.org is an organisation that promotes schemas for structured data including one for Frequently Asked Questions (FAQs) on the Internet, on web pages, in email messages, and beyond. This helps provide context to search engines like Google.

How do we add structured data using Yoast?

Adding structured data usually involves copy-pasting code from a site like schema.org and modifying code.
Yoast provides two structured data blocks, the FAQ block and the How-to block. They provide an easy way to add structured data to your site without the need to code.
Yoast provides two structured date blocks, the FAQ block and the How-to block.

How many FAQ pages can I set up

You can use the Yoast FAQ blocks to create unlimited FAQ posts or pages. Once you have added some styles and scripts, you can set all of them up as accordions if you wish.

Are there any dependencies?

Yes – Ensure that the Yoast SEO plugin is installed and activated. Yoast SEO is the #1 WordPress SEO plugin with over 5 million active installs.
The FAQ block only works in the block editor (Gutenberg Editor). If you are using Classic WordPress editor – here is one more reason to switch to the block editor.

Does this work on WordPress.com

The method described is for self-hosted sites using WordPress.org.

Do I need to load jQuery or a framework like Bootstrap

This is a lightweight option – you do not need to load an entire framework like Bootstrap or Foundation. It uses vanilla JavaScript and does not even need jQuery to make it work.

Can this be styled to suit my brand or style guide?

Yes – If you are familiar with basic CSS. Learn CSS via W3Schools.
I am happy to set this up for you, please contact me for a quote.

Hope that helps you! Please feel free to ask any questions via comments below.

Need customs styles to suit your brand?
I am happy to set up branded FAQs for you, please contact me for a quote.

If this article was helpful, please share it.

0 0 vote
Article Rating
Notify of
Oldest Most Voted
Inline Feedbacks
View all comments
13 days ago

I just downloaded and installed it on one of my websites. Thanks for your work!

1 month ago

Can I use it in the classic editor?

Do NOT follow this link or you will be banned from the site!
I would love your thoughts, please comment. VJx
Affordable and creative web solutions from Melbourne, AU. I build robust fast-loading WordPress sites for a fraction of the price. Call VJ on +61389867186
Address :
106 Alamanda Blvd,
Point Cook,
VIC - 3030
Tel : +61389867186
Email : hello@vjdesign.com.au


Image of