For the longest time I’ve been using Yoast SEO on most of the sites I build. They added structured data blocks for FAQPage and How To to the block editor a while ago. These blocks allow you to improve your search visibility in all major search engines. A client wanted the FAQ blocks to be collapsible accordion items. For Yoast SEO, I would use a customized version of this tutorial to do so.
As the title suggests, this isn’t about Yoast SEO, but the newer RankMath SEO plugin for WordPress. They offer far more features in their free version. A client needed Local SEO capabilities that went beyond the free plugin from Yoast. Recently RankMath introduced a very similar FAQ block and my client wanted the FAQs to behave like an accordion too.
To achieve this, I adapted the code from the aforementioned tutorial to work with RankMaths FAQ markup instead.
RankMath’s FAQ block with collapsible headers
The following Javascript and CSS will turn your RankMath FAQ block into an accordion. This allows the user to click on the individual questions and expand the answer below. Other open questions will be collapsed, so only one answer will be displayed at a time.
Check out the code for collapsible FAQ blocks on Github.
How the accordion FAQ block will look like
The following image is an example of how your RankMath FAQ block could look like on the frontend of your site.
What are the benefits of structured FAQ pages?
Using structured markup on an FAQPage tells search engines that your content uses a set of questions and answers. In turn search engines can better understand your content and you might get a rich result on the search results page.
RankMath’s FAQ block automatically generated the necessary JSON-LD markup to tell search engines that this is a structured FAQ section with questions and answers.
Update: November 2022
To implement this, you can either have the JS in an individual file in your theme (or hopefully child theme, so it doesn’t get overwritten when you update) or you could use a plugin like Code Snippets and make sure it loads the JS code on wp_footer hook.
As less and less themes ship with jQuery (check your site as a visitor, it still gets loaded, when you are logged in, because the admin bar depends on it), make sure that jQuery gets loaded using something like this in your functions.php or using the aforementioned plugin: wp_enqueue_script('jquery');
Update: January 2023 - Open the first FAQ item
Before I re-launched my site, I got a comment on my WordPress site about the possibility to have the first FAQ item open when the page finishes loading. I currently don't use RankMath FAQ blocks on any of my sites, but the following should work:
Replace this line:$('.rank-math-block').find('.rank-math-answer').hide();
with this line:
$(".rank-math-block").find(".rank-math-answer:not(:first)").hide();
$(".rank-math-block .rank-math-question:first").addClass("collapse");Update: August 2023 - Code fixed
As pointed out by a reader, the code to have the first item open, was missing the line to that adds the proper CSS class to turn the + into an x. The code has been fixed in all versions and there is now a CodePen version too for you to play with.