How to Collapse Table of Contents in Rank Math?

In this tutorial, we are going to learn how to collapse table of contents in Rank Math SEO plugin.

We’ll be using a combination of JavaScript and CSS to make the TOC block collapsible and style it accordingly.

Steps to Collapse Table of Contents in Rank Math

The Rank Math TOC block is displayed by default. However, you can make it collapsible by adding a simple JavaScript code snippet. This will allow users to toggle the visibility of the TOC content.

Step 1: Add the JavaScript Code

Copy the following JavaScript code and paste it into a Code Snippet plugin, or add it directly to your theme’s functions.php file.

function turn_rm_toc_collapsable() {
    ?>  

This code will make the TOC block collapsible by toggling the overflow and maxHeight properties of the nav element within the TOC block.

Step 2: Style the TOC Block

Next, you can add some CSS styles to enhance the appearance of the TOC block.

Copy the following CSS code and paste it into your theme’s style.css file or a custom CSS plugin:

.wp-block-rank-math-toc-block {
    position: relative;
}

.wp-block-rank-math-toc-block h2 {
    background: #f1f2f6;
    padding: 10px 12px 10px 18px;
    cursor: pointer;
    font-size: 18px !important;
    font-weight: normal !important;
    position: relative;
    margin-bottom: 0;
}

.wp-block-rank-math-toc-block h2:before {
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 12px;
    border-color: transparent transparent transparent #000000;
    margin-right: 8px;
}

.wp-block-rank-math-toc-block nav {
    padding: 10px 10px 0px 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, overflow 0.3s ease;
}

This CSS code styles the TOC block by adding a background color to the heading, making the heading clickable (cursor: pointer), and adjusting the padding and margin of various elements.

It also includes a transition effect for a smooth animation when toggling the visibility of the TOC content.

Also Read:

Frequently Asked Questions

How do I collapse the Rank Math TOC block by default?

If you want to hide the Rank Math TOC block by default, add the following CSS to your theme’s style.css file or a custom CSS plugin. This will initially hide the TOC content, and users can click on the heading to expand it.

Can I change the appearance of the TOC block further?

Absolutely! You can modify the CSS styles to adjust the colors, font sizes, spacing, and other visual aspects of the TOC block to match your website’s design better.

At the End

Following the steps outlined in this tutorial, you can make the Rank Math TOC block collapsible and style it according to your preferences.

This can help improve the user experience and declutter your content pages.

If you have any questions or need further assistance, feel free to leave a comment below.

Related articles

Seven Common WordPress Errors (and Simple Solutions)

Most of the people that read my blog have...

[Fix] Links Do Not Have a Discernible Name in WordPress

In this tutorial, we are going to fix issues...

How To Add Internal Links In WordPress Quickly

In my post about how I grew my organic traffic...

How to Add Phone Number and Email in GeneratePress Header?

In this tutorial, we’ll learn how to add phone...

How to Cloak Affiliate Links in WordPress?

Are you searching for a guide to cloak affiliate...

Case Studies

Finance and Budgeting Blog

Easy Extra Dollar is your trusted source for valuable insights into finance, budgeting, and investing. The platform is dedicated to helping individuals and families...

Marketing Gamut – Marketing Blog

Marketing Gamut is the ultimate platform for marketing enthusiasts, offering valuable insights, engaging content, and thought-provoking discussions on all things marketing. The client needed...

Business and Marketing Insights Blog

Business Analysis is a platform dedicated to decoding the complexities of business and marketing through comprehensive data analysis and strategic planning. The client required...