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.

29 thoughts on “Code Snippet: Turning RankMath’s FAQ Block into an Accordion”

  1. Thank you for share this code for free. It’s work perfectly on my site. But I still have problem. When i check it using desktop is totally fine but when i try open the page using safari on iphone the expand and collapse button didn’t work. All FAQ content is expanded

    I try using devices in brave is still worked. But not worked on my real iphone. You can my page on

  2. Hey there, i like this solution very much but have one specific problem. My H3 Question Headings are a bit longer and overlap the icon (or vice versa, dont know). So, is there an option to break the question before it reaches the cross icon?

  3. Hi, ich habe das Skript und das CSS im Einsatz auf meiner Website, jedoch funktioniert es nur, wenn ich einen FAQ-Block von Rank Math einsetze. Wenn ich FAQ-Blocks an mehreren (unterschiedlichen) Stellen einsetze, sind alle Accordions ausgeklappt. Kannst du mir helfen?

    • Good catch Lennart, I have updated the script above with classnames instead of id selectors. Before only one FAQ Schema block was allowed, but now it seems multiple are ok. Anyways got it working this way. Let me know if it works on your project?

  4. HI there,
    I loaded the JS code in my code snippet but it is just showing on the top of my page.
    I am using the yoast one and copied the yoast code you had suggested.
    Any help would be appreciated.
    ATM, i am testing it on a staging site as i don’t want my actual site to look messed up.


Leave a Comment