How to Add a Hide/Open Button to Rank Math TOC (Table of Contents) Block

📜 The Table of Contents (TOC) is an essential feature for long-form content, offering a roadmap to readers and enhancing the user experience. While many WordPress plugins provide TOC functionality, RankMath is a popular choice that not only offers SEO features but also a TOC block.

😕 However, one limitation is that the TOC is always open by default, and there’s no built-in option to toggle it. In this blog post, we’ll guide you through the process of adding a hide/open button to the Rank Math TOC block in WordPress posts. 📝

Why Add a Hide/Open Button in Rank Math TOC?

Adding a hide/open button to your TOC can significantly improve the user experience. It allows readers to toggle the TOC, making it less intrusive while they read your content. This feature is particularly useful for mobile users, where screen size is limited. 📱

Step-by-Step Guide to add a Hide/Open Button in Rank Math TOC

1. Log in to your WordPress admin dashboard.
2. Navigate to Plugins > Add New.
3. In the search bar, type “WPCode” and install.
4. After installation, click Activate to enable the plugin on your site.
5. Once activated, you’ll see a new menu item named Code Snippets in your WordPress admin sidebar.
6. Click on it to open the plugin interface.
7. Within the plugin interface, click on Add New Snippet to create a new code snippet and click on Add Your Custom Code.
8. You’ll see a text editor, select “Code Type – PHP Snippet“.
9. Copy and paste the below PHP code into the text editor.
10. Then, scroll down and select Insert Method – “Auto Insert“
11. In the location option, select “Frontend Only“.
12. And lastly, turn on “Enable Logic” and select “Show“, “Post type Is Posts” – This is important as it will help to load the TOC assets only on blog posts where Rank Math TOC is added.
13. Finally, click on activate and save the snippet. And boom, your Rank Math Table of Content block has been upgraded with Hide/ Show button.

function enqueue_rankmath_toc_scripts() {
if ( is_single() ) { // Check if it's a single post page
echo '<style>#rank-math-toc>h2{display:flex;justify-content:space-between;align-items:center}#rank-math-toc>nav{display:none}@media (max-width:768px){#rank-math-toc>h2{flex-direction:column;align-items:flex-start}#toggle-toc-button{margin-top:10px}}</style>';
echo '<script>document.addEventListener("DOMContentLoaded",function(){const t=document.querySelector("#rank-math-toc > h2");if(t){const n=document.createElement("button");n.innerHTML="Show",n.id="toggle-toc-button",n.style.float="right",t.appendChild(n)}const e=document.querySelector("#rank-math-toc > nav"),n=document.querySelector("#toggle-toc-button");let o=!1;n&&e&&n.addEventListener("click",function(){o=o?(e.style.display="none",!(n.innerHTML="Show")):(e.style.display="block",n.innerHTML="Hide",!0)})});</script>';}}
add_action( 'wp_footer', 'enqueue_rankmath_toc_scripts' );

Conclusion

Adding a hide/open button to the RankMath TOC block in WordPress posts can significantly enhance user experience and contribute to your SEO efforts. By following this step-by-step guide, you can easily implement this feature and offer a more streamlined reading experience to your audience. 🚀📊