Title: Rankmath TOC toggle
Last modified: August 19, 2023

---

# Rankmath TOC toggle

 *  Resolved [samwp1](https://wordpress.org/support/users/samwp1/)
 * (@samwp1)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/rankmath-toc-toggle/)
 * I want to keep Rankmath TOC toggling. Is there any way to add the show-hide option
   to the Rankmath TOC block?

Viewing 8 replies - 1 through 8 (of 8 total)

 *  Thread Starter [samwp1](https://wordpress.org/support/users/samwp1/)
 * (@samwp1)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/rankmath-toc-toggle/#post-16985590)
 * I found a [solution here](https://support.rankmath.com/ticket/table-of-contents-29/).
   But it has a little problem. When activated, the TOC block overlaps with the 
   existing page contents. Can you give some solution to that?
   [Screenshot](https://imgbox.com/qXk14e6a)
    -  This reply was modified 2 years, 11 months ago by [samwp1](https://wordpress.org/support/users/samwp1/).
 *  Plugin Support [Rank Math Support](https://wordpress.org/support/users/rankmathteam/)
 * (@rankmathteam)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/rankmath-toc-toggle/#post-16989155)
 * Hello [@samwp1](https://wordpress.org/support/users/samwp1/),
 * Thank you for your query and we are so sorry about the trouble this must have
   caused.
 * The solution from the support topic you shared doesn’t exactly give the desired
   styling as this is made generally to add the basic accordion feature to our TOC.
 * You would need to adjust the styling so it would fit with your theme. We would
   like to check the screenshot you shared but it doesn’t seem to load on our end.
   Can you verify?
 * Alternatively, please share the affected URL so we can the elements.
 * Looking forward to helping you.
 *  Thread Starter [samwp1](https://wordpress.org/support/users/samwp1/)
 * (@samwp1)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/rankmath-toc-toggle/#post-16991572)
 * [@rankmathteam](https://wordpress.org/support/users/rankmathteam/)
 * I added that function using the code snippet plugin and currently turned off 
   because of that error.
 * The screenshot opened fine ([https://imgbox.com/qXk14e6a](https://imgbox.com/qXk14e6a))
   
   Other than that, don’t you have an idea to add that feature to the TOC block 
   in future versions? I think it is a good feature that many users required.
 *  Plugin Support [Rank Math Support](https://wordpress.org/support/users/rankmathteam/)
 * (@rankmathteam)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/rankmath-toc-toggle/#post-16994032)
 * Hello [@samwp1](https://wordpress.org/support/users/samwp1/),
 * At the moment, we don’t have immediate plans on adding that feature to our TOC
   block. If this is something we can add to the feature, we will surely do.
 * Upon checking the screenshot you shared, it seems the actual block is overlapping
   the content under it. Please make sure that the block has an adjustable height(
   auto) which you can configure in the CSS.
 * If you wish for us to check it, please share the URL here so we can come up with
   a custom CSS for it.
 * Looking forward to helping you.
 *  [somto](https://wordpress.org/support/users/somto/)
 * (@somto)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/rankmath-toc-toggle/#post-17008719)
 * Thanks to Rank Math Team for this wonderful gift that keeps giving.
 * [@samwp1](https://wordpress.org/support/users/samwp1/) I modified the codes provided
   on this page [https://rankmath.com/kb/table-of-contents-block/](https://rankmath.com/kb/table-of-contents-block/)
   to make my table of content expanded by default, then added little tweaks to 
   match my blog theme. I hope you will find the modifications helpful.
 * So, here are the codes and the modified versions
 * **Original function code:**
 *     ```wp-block-code
       /**
        * Convert Rank Math FAQ Block Into Accordion
        */
       function turn_rm_toc_collapsable() {
           ?>
           <script>
               jQuery(document).ready(function() {
                   var tocItems = jQuery("div.wp-block-rank-math-toc-block");
                   tocItems.bind("click", function(event) {
                       var nav = jQuery(this).find("nav");
                       if (nav.css("overflow") == "hidden") {
                           nav.css("overflow", "visible");
                           nav.css("max-height", "100vh");
                       } else {
                           nav.css("overflow", "hidden");
                           nav.css("max-height", "0");
                       }
                   });
               });
   
           </script>
           <?php
       }
       add_action( 'wp_footer', 'turn_rm_toc_collapsable' );
       ```
   
 * Modified function code (to be added in functions.php):
 *     ```wp-block-code
       /**
        * Convert Rank Math FAQ Block Into Accordion
        */
       function turn_rm_toc_collapsable() {
           ?>
           <script>
               jQuery(document).ready(function() {
                   var tocItems = jQuery("div.wp-block-rank-math-toc-block");
                   tocItems.bind("click", function(event) {
                       var nav = jQuery(this).find("nav");
                       if (nav.css("overflow") == "visible") {
                           nav.css("overflow", "hidden");
                           nav.css("max-height", "0");
                       } else {
                           nav.css("overflow", "visible");
                           nav.css("max-height", "100vh");
                       }
                   });
               });
   
           </script>
           <?php
       }
       add_action( 'wp_footer', 'turn_rm_toc_collapsable' );
       ```
   
 * Here is what the modified function above does:
 * When the user clicks on the table of content heading, the code checks if the 
   table of contents is set to visible in the CSS declaration, if yes it will hide
   the table of content. If no, the table of content will remain visible.
 * Meanwhile, in the CSS that I modified, I set the table of contents to be visible
   by default.
 * **Original CSS code:**
 *     ```wp-block-code
       .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;
       }
       .wp-block-rank-math-toc-block input:checked+h2~nav {
       	max-height: 100vh;
       	overflow:visible;
       }
       ```
   
 * **Modified CSS code (To be added in customizer or child theme):**
 *     ```wp-block-code
       /*Rank Math Table of content*/
       .wp-block-rank-math-toc-block {
       	position:relative;
       }
   
       .wp-block-rank-math-toc-block h2 {
       /*Changed the background color to match my theme*/
           background: #1c232f;
           padding: 10px 12px 10px 18px;
           cursor: pointer;
       /*Increased the font size*/
           font-size: 20px !important;
           font-weight: 600 !important;
           position: relative;
       /*Add bottom margin and border to the toc heading*/
           margin-bottom: 15px;
           border: solid 1px;
       }
       .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 #f7f7f7;
       	margin-right: 8px;
       }
   
       .wp-block-rank-math-toc-block nav{
           	max-height: 100vh;
       	overflow:visible;
       }
       .wp-block-rank-math-toc-block input:checked+h2~nav {
           padding: 10px 10px 0px 10px;
       	max-height: 0;
       	overflow:hidden;
       }
       ```
   
 *  Thread Starter [samwp1](https://wordpress.org/support/users/samwp1/)
 * (@samwp1)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/rankmath-toc-toggle/#post-17008804)
 * [@somto](https://wordpress.org/support/users/somto/) 
   Thank you very much for
   this great posting
 * This one will be helpful for anyone who searches this
 * I solved that problem by adding this CSS code to the theme. Activating it through
   the code snippet plugin didn’t work.
 *  [somto](https://wordpress.org/support/users/somto/)
 * (@somto)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/rankmath-toc-toggle/#post-17008843)
 * [@samwp1](https://wordpress.org/support/users/samwp1/) I glad it helped you
 * Hope you are using child theme to add custom codes on your site for flexibility
 *  Plugin Support [Rank Math Support](https://wordpress.org/support/users/rankmathteam/)
 * (@rankmathteam)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/rankmath-toc-toggle/#post-17011398)
 * Hello [@samwp1](https://wordpress.org/support/users/samwp1/) & [@somto](https://wordpress.org/support/users/somto/),
   
   Glad that the solutions discussed here can serve your purposes at the moment 
   to get the TOC feature exactly how you want it on the websites.You can keep an
   eye on our changelog for any future changes with this feature: [https://rankmath.com/changelog](https://rankmath.com/changelog)
   Thank you.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Rankmath TOC toggle’ is closed to new replies.

 * ![](https://ps.w.org/seo-by-rank-math/assets/icon.svg?rev=3438330)
 * [Rank Math SEO – AI SEO Tools to Dominate SEO Rankings](https://wordpress.org/plugins/seo-by-rank-math/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/seo-by-rank-math/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/seo-by-rank-math/)
 * [Active Topics](https://wordpress.org/support/plugin/seo-by-rank-math/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/seo-by-rank-math/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/seo-by-rank-math/reviews/)

 * 8 replies
 * 3 participants
 * Last reply from: [Rank Math Support](https://wordpress.org/support/users/rankmathteam/)
 * Last activity: [2 years, 11 months ago](https://wordpress.org/support/topic/rankmath-toc-toggle/#post-17011398)
 * Status: resolved