Code Snippet: Turning RankMath’s FAQ Block into an Accordion

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.

Leave a Comment