somto

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