How to Convert Yoast FAQ into a Toggleable Accordion

Today, in this article, you will learn how to turn the Yoast FAQ block into a toggleable accordion.

Yoast is the most popular and most used WordPress plugin for implementing SEO in your WordPress website. It has lots of features to boost your website ranking.

Yoast FAQ Block is also one of the best tools in Yoast for adding FAQs to your website. By default, the Yoast FAQ block looks very simple, and there’s no feature to add a toggleable On/Off accordion.

It does look like this:

Why Add Yoast FAQ Block

If you want your FAQ pages to rank higher in search results, you need to add valid FAQ structured data to your pages.

Yoast makes it very simple. By using the FAQ block on your page, Yoast automatically adds the structured data and enhances the chances of getting a rich result for your FAQ page.

Many business sites have a separate FAQ page to answer all common questions about a product, service, or company.

You can also add a FAQ block on your page or post where you feel this is necessary.

How to Add FAQ Block to Your WordPress Site

FAQ is the best option for providing additional information to your users. This is usually a single page collecting the questions and their answers on a specific subject, product, or company.

Adding an FAQ block is very simple.

To do so:

• Make a page on your WordPress site, and add a title and an introductory paragraph.
• Now add the FAQ structured data content block by clicking on the + icon and scrolling down to the end to find it or type FAQ in the search bar.
• Add questions and answers to FAQ blocks and publish.

Now it’s time to turn this simple FAQ block into a toggleable accordion.

Turn the FAQ block into a Toggleable Accordion Using CSS and JS:

Here, we will use CSS to make FAQ Block more user-friendly and eye-catching.

The following simple CSS code makes the FAQ stand out and prepares the FAQ block for further folding ability. You need to add this code to your child theme’s styles.css.

Or add this code in the Additional CSS tab by going to WordPress Admin – Appearance – Customize.

/* Yoast FAQ styling */
.schema-faq {
	margin-bottom: 25.5px;
}

.schema-faq-section {
    border: 2px solid #2b6cb0;
    margin-bottom: 2px;
    background-color: #2b6cb0;
	color: #ffffff;
	border-radius: 2px;
}

.schema-faq-section .schema-faq-question {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    padding: 15px 55px 15px 12px;
    cursor: pointer;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
}

.schema-faq-section .schema-faq-question.faq-q-open {
    border-bottom: 2px solid #2b6cb0;
}

.schema-faq-section .schema-faq-question:after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 0;
    width: 50px;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-weight: 100;
    color: #ffffff;
    font-size: 20px;
}

.schema-faq-section .schema-faq-question.faq-q-open:after {
    content: "-";
}

.schema-faq-section p.schema-faq-answer {
    margin: 0;
    padding: 15px 12px 15px 12px;
    background-color: #ffffff;
    color: #000000;
    display: none;
}

This code will replace your FAQ block as:

Now, it’s looking pretty and better for user experience purposes. Finally, we’ll add a JavaScript (JS) code to make it toggleable.

Copy the following code and add it to your JavaScript file in the wp_footer section:

<script>
jQuery(document).ready(function() {
	jQuery('.schema-faq-section .schema-faq-question').click(function(){
		if (jQuery(this).siblings('.schema-faq-answer').is(':visible')) {
			jQuery(this).removeClass('faq-q-open');
			jQuery(this).siblings('.schema-faq-answer').removeClass('faq-a-open').slideUp();
	} 
	else {
		jQuery(this).addClass('faq-q-open');
		jQuery(this).siblings('.schema-faq-answer').addClass('faq-a-open').slideDown();
		}
	})
});
</script>

To add this, you can use the Code Snippets plugin.

Now, the Yoast FAQ block has turned into a toggleable accordion.

Let me know how useful you found this tutorial. If you feel any problem turning the FAQ block into a toggleable accordion, please comment below for a better solution.