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:
- [Fix] Links Do Not Have a Discernible Name in WordPress
- How to Create a Deal Page in WordPress?
- Local WordPress Development – How to Run WordPress Locally?
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.
>> 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.
Perhaps you forgot to include the code in the FAQ answer.
Hi Yusof,
The code is available in the tutorial.
Thanks