Rankmath TOC toggle

I found a solution here. 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

• This reply was modified 1 year, 3 months ago by samwp1.

Hello @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.

@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)

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.

Hello @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.

Thanks to Rank Math Team for this wonderful gift that keeps giving.

@samwp1 I modified the codes provided on this page 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:

/**
 * 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):

/**
 * 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-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):

/*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;
}

@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.

@samwp1 I glad it helped you

Hope you are using child theme to add custom codes on your site for flexibility

Hello @samwp1 & @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

Thank you.