Animated Accordion using Yoast FAQ Block – In Just 10 Minutes

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

I am excited to help you build an awesome 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 are we building?

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.

Yoast FAQ Default Styles
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).

Illustrating sample search in google for the term 'car insurance'. One of the results shows FAQs on the search page itself.
Example FAQ in Google Search Engine Results Page

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

No.
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.
OR
I am happy to set this up for you, please contact me for a quote.

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

Watch a short video

Follow my step-by-step How-to Guide

Time needed:  10 minutes.

The method described below is easy but is only for someone ready to delve into custom code. I am happy to set this up for you, please contact me for a quote.


  1. Add the required CSS styles

    a. Copy the CSS code below.

    .yoast-faq-accordion .schema-faq-question {
    display: block;
    color: #444;
    background-color: #eee;
    padding: .5em 1em;
    border-top: 2px solid #fff;
    cursor: pointer;
    }
    .yoast-faq-accordion .schema-faq-question button {
    all: inherit;
    border: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.5em 0;
    }
    .yoast-faq-accordion .schema-faq-question button:focus svg {
    outline: 2px solid;
    }
    .yoast-faq-accordion .schema-faq-question button svg {
    height: 1em;
    margin-left: 0.5em;
    }
    .yoast-faq-accordion .schema-faq-question [aria-expanded="true"] .vert {
    display: none;
    }
    .yoast-faq-accordion .schema-faq-question [aria-expanded] rect {
    fill: currentColor;
    }
    .yoast-faq-accordion .schema-faq-answer {
    padding: 1em;
    border: 1px solid #ddd;
    margin: 0 0 .5em 0;
    }


    b. Paste the code into your site using the Simple CSS Plugin.
    Simple CSS gives you an awesome editor so you can easily add your CSS.
    Add code to WordPress using Simple CSS plugin

  2. Add the required JavaScipt code

    a. Copy the JS code in the attached text file.

    b. Paste it into your site using the Code Snippets plugin.
    Code Snippets is an easy, clean and simple way to run PHP and JavaScript code snippets on your site. It removes the need to add custom snippets to your theme theme’s functions.php file.

    WordPress-Code-Snippets-Plugin

  3. 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.

  4. 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.

  5. Add a class

    To style the FAQs into a show/hide accordion add a class yoast-faq-accordion to the block. This allows you to show some FAQs as accordions and leave others as is.

    Add a class yoast-faq-accordion to the Yoast FAQ block to turn it into an accordion

  6. Done.

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

If you don’t like to code -- I am happy to set this up for you, please contact me for a quote.

Source/Inspiration:

1 thought on “Animated Accordion using Yoast FAQ Block – In Just 10 Minutes”

Leave a comment