How to Turn Rank Math FAQ Block to Accordion? Easy Guide. [2021]

In this article, I will show you how you can convert Rank Math FAQ Blocks into a stylish Accordion Block. You can easily do that by following simple steps.

As you know Rank math SEO plugin has a build-in feature to add FAQ schema to WordPress. If you are using Gutenberg or classic editor in WordPress than you can add FAQs to blogpost using RankMath Blocks. But it has its own limitation as it don’t allow us to style the FAQs like most of the page builder do.

But, RankMath FAQ schema implementation is SEO friendly and passed the Google Rich result test.

So, let’s learn how to turn the structured FAQ block that comes with RankMath’s SEO plugin into a collapsible accordion.

There are two ways you can achieve that. One is by installing a Lightweight & simple WordPress plugin that contains the CSS and JS necessary for this. Or you can simply add the CSS and JS script to your current theme.

How to add Accordion Style in Rank math FAQ blocks?

To add accordion style to your RankMath’s FAQ blocks follow the below steps.

  1. Go to your blog post and add the FAQ block from Rank math.
  2. Now search for a plugin called “Turn Rank Math FAQ Block to Accordion
  3. Now activate this plugin & Accordion-style in Rank math SEO is added automatically.
Turn Rank Math FAQ Block to Accordion plugin for wordpress
  • Save
Turn Rank Math FAQ Block to Accordion” plugin for WordPress

Note: The plugin is developed by “WP How Know” and it is a very lightweight plugin. It contains the basic CSS and JS script required to turn the structured FAQ block that comes with RankMath’s SEO plugin into a collapsible accordion.

Now your regular FAQ blocks from rank math convert to beautiful Accordion Style FAQ block as shown in the below image.

How to add Accordion Style in Rank math FAQ blocks
  • Save

It is super helpful for those who don’t want to add CSS and JS manually to the theme to stylish the FAQ section.

Will the FAQ blocks still be indexable after adding Accordion style?

Yes, it will works perfectly fine after adding the accordion style. You can check this in Google rich result test.

Is it possible to change the accordion style in this plugin?

This plugin doesn’t have any other style but you can still change the looks of this style using custom CSS.

You can change the design of this accordion FAQ block generated by this plugin using custom CSS code. Here I have changed the style a little bit. [as shown in featured image].

#rank-math-faq .rank-math-list-item {
    border: 2px solid #F8F9F9;
    margin-bottom: 20px;
    background-color: #E5E8E8;
#rank-math-faq .rank-math-answer {
    margin: 0;
    padding: 12px;
    background-color: #F8F9F9;
    font-size: 16px!important;
    line-height: 1.4!important;
    border-bottom: 1px solid #dedee0;
    display: none;

You need to paste the CSS code in the Additional CSS section of your theme or in the style.css file of your theme editor.

You can also change the background color, width, and border, etc by changing the above CSS code.

Video Guide For Rank Math FAQ Accordion Style

How to convert RankMath FAQ blocks into an accordion style

How to change RankMath FAQ schema blocks into a FAQ block with collapsible headers? [Manual]

Those who don’t want to add an extra plugin then I have the custom CSS and JS file for that. But the style in the manual ways is very basic and doesn’t compete with the plugin’s style. This is meant for better performance without adding much pressure on loading speed.

You can check the Final result of this manual process in the screenshot.

  • Save
FAQ schema by RankMath with custom CSS & JS

Let’s learn how you can achieve that. Just follow the steps properly.

Step-1: Add CSS in current theme.

Here you need to add the below CSS file to your theme additional CSS section or theme editor’s style.css section.

Go to WordPress dashboard > Appearance > customize > Additional CSS > paste the code and save it.

Additional CSS section in wordpress
  • Save

Copy the CSS code from here.

#rank-math-faq .rank-math-list-item{
#rank-math-faq .rank-math-list-item input{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 41px;
    opacity: 0;
    cursor: pointer;
#rank-math-faq .rank-math-list-item h3 {
    background: #f1f2f6;
    padding: 10px 12px 10px 18px;
    cursor: pointer;
    font-size: 18px !important;
    font-weight: normal !important;
    margin-bottom: 0;
#rank-math-faq .rank-math-list-item h3:before {
	content: "";
    width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 12px;
	border-color: transparent transparent transparent #000000;
	margin-right: 8px;
#rank-math-faq .rank-math-list-item input:checked+h3:before {
#rank-math-faq .rank-math-answer{
	padding: 10px;
	max-height: 0;
#rank-math-faq .rank-math-list-item input:checked+h3~.rank-math-answer {
	max-height: 100vh;
div.rank-math-list-item:hover > div.rank-math-answer {
    max-height: 100vh;
    overflow: visible;

#rank-math-faq .rank-math-answer {

Step-2: Add JavaScript in theme editor

Now you have to add the JavaScript to your theme editor to function the collapsible accordion in the Rankmath FAQ block.

Now go to WordPress dashboard > Appearance > Theme editor > Functions.php > paste the below script as shown here.

Java script for Rankmath FAQ block
  • Save
Switch to function.php in theme editor

Copy the java script code and paste in function.php

function faq_accordion_hook_javascript_footer() {
        jQuery(document).ready(function() {
                var faqBlock = jQuery("div#rank-math-faq");
                var faqItems = faqBlock.find("div.rank-math-list-item");
                faqItems.bind("click", function(event) {
                    var answer = jQuery(this).find("div.rank-math-answer");
                    if (answer.css("overflow") == "hidden") {
                        answer.css("overflow", "visible");
                        answer.css("max-height", "100vh");
                    } else {
                        answer.css("overflow", "hidden");
                        answer.css("max-height", "0");
add_action('wp_footer', 'faq_accordion_hook_javascript_footer');

After adding the javascript don’t forget to save the code.

Now your RankMath’s structured FAQ block automatically converted to Accordion Style. Now it will work as a FAQ block with collapsible headers.


The first method discussed in this article is easy to convert the FAQ block of rank math to a collapsible Accordion block. But the second method is a bit manual process but load faster than the first method.

So, in which method are you going to style your Rank Math FAQ blocks– let me know in the comment section.

Also, don’t forget to share this article with your friends who use Rank math to add FAQs.

Read Also: How to add Author box in GeneratePress theme using hook element. [without Additional Plugin.]

Hello there. I am Abhishek Padhi, an Indian digital entrepreneur. With a handful of years of practice and experiment, I currently share top-notch information related to Blogging, SEO, etc. If you want to start a blog easily and create a fortune out of it, then you will love key2Blogging. You can learn more on the about us page.

2 thoughts on “How to Turn Rank Math FAQ Block to Accordion? Easy Guide. [2021]”

Leave a Comment

Copy link