How to Collapse Table of Contents in Rank Math

How to Collapse Table of Contents in Rank Math?

by

[ad_1]

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() {
    ?>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var tocItems = document.querySelectorAll("div.wp-block-rank-math-toc-block");
            tocItems.forEach(function(tocItem) {
                tocItem.addEventListener("click", function(event) {
                    var nav = tocItem.querySelector("nav");
                    if (nav.style.overflow === "hidden" || nav.style.overflow === "") {
                        nav.style.overflow = "visible";
                        nav.style.maxHeight = "100vh";
                    } else {
                        nav.style.overflow = "hidden";
                        nav.style.maxHeight = "0";
                    }
                });
            });
        });
    </script>
    <?php
}
add_action('wp_footer', '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 above available 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.

[ad_2]

Leave a Comment