How to Make the Table of Contents Collapsible in Rank Math SEO Plugin

 In this tutorial, we'll demonstrate how to collapse the Table of Contents (TOC) in the Rank Math SEO plugin using a combination of JavaScript and CSS. This will enhance the user experience by allowing visitors to toggle the visibility of the TOC content.

Steps to Collapse the Table of Contents in Rank Math

The Rank Math TOC block is displayed by default, but you can make it collapsible with a few simple steps. Follow these instructions to achieve a collapsible TOC block.

Step 1: Add JavaScript Code

To make the TOC block collapsible, add the following JavaScript code to your site. You can do this by using a Code Snippet plugin or by adding 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 JavaScript code enables the TOC block to toggle between expanded and collapsed states by adjusting the overflow and maxHeight properties of the nav element within the TOC block.

Step 2: Style the TOC Block

Next, enhance the appearance of the TOC block with CSS. Add the following CSS code to your theme’s style.css file or use 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, including the heading to make it clickable, adjusts padding, and adds a transition effect for a smooth animation when toggling the visibility of the TOC content.

Frequently Asked Questions

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

To hide the Rank Math TOC block by default, include the provided CSS in your theme’s style.css file or a custom CSS plugin. This will initially hide the TOC content, and users can click the heading to expand it.

2. Can I further customize the appearance of the TOC block?

Yes, you can modify the CSS styles to adjust colors, font sizes, spacing, and other visual elements to better match your website’s design.

Conclusion

By following these steps, you can easily make the Rank Math TOC block collapsible and style it to fit your site’s aesthetics. This approach improves user experience by decluttering your content pages.

If you have any questions or need additional assistance, please leave a comment below.