How to Turn Yoast FAQ into a Toggleable Accordion

Want to learn how to turn the Yoast FAQ block into a toggleable accordion using simple CSS and JS code? So this article is for you.

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.

But you can make it toggleable by adding custom CSS and JS code lines to your website.

Why add a 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 a 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 with a beautiful accordion.

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.

Here I’m using the GeneratePress premium theme and its Element Module to add any type of code to my website.

GeneratePress is the best theme for designing any type of website. It is a fast and light WordPress theme.

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.