Collapsible Section in Rank Math ToC Block

Hello,

Thank you for contacting the support and sorry for any inconvenience that might have been caused due to that.

Please add this bit of code in your theme functions.php file: https://pastebin.com/jLTDeAWw

Here is how to add a filter to your site: https://rankmath.com/kb/wordpress-hooks-actions-filters/

This should allow you to turn your ToC block into a collapsible section.

Hello,

Could you please share the URL where you have applied the TOC block so we can check as well (if it’s already published)?

Meanwhile, please try using and customizing this custom CSS code on your site:

.wp-block-rank-math-toc-block {
    position: relative;
}

.wp-block-rank-math-toc-block h2 {
    background: #f7dab7;
    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 0px 6px 12px;
    border-color: transparent transparent transparent #000000;
    margin-right: 8px;
    transition: all linear .3s;
}

.wp-block-rank-math-toc-block h2.active:before {
    transform: rotate(90deg);
}

.wp-block-rank-math-toc-block nav {
    padding: 10px 10px 0px 10px;
    max-height: 0;
    overflow: hidden;
    transition: all linear .3s;
}

.wp-block-rank-math-toc-block input:checked + h2 ~ nav {
    max-height: 100vh;
    overflow: visible;
}

And here’s a tutorial on how to use custom CSS on your site:
https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

Then, replace the filter with this one: https://pastebin.com/TeDpNZZZ

Let us know how this goes.

Thank you.

Hello,

Assuming you have already applied the CSS above, paste the code on the lowest part/last line of your functions.php file below this line:
require $theme_dir . '/inc/structure/search-modal.php'

Also, if you’re using a child theme, you can paste the code in there (child theme’s functions.php file) so it won’t get removed once your theme updates:
https://rankmath.com/kb/wordpress-hooks-actions-filters/#functions-php-file

Let us know how this goes.

Thank you.

Hello,

In this case, please try to replace the https://support.rankmath.com/ticket/collapsible-section-in-rank-math-toc-block/?view=all#post-581877 CSS with the following one:

.wp-block-rank-math-toc-block {
    position: relative;
}

.wp-block-rank-math-toc-block h2 {
    background: #ddd;
    padding: 10px 12px 10px 18px;
    cursor: pointer;
    font-size: 18px !important;
    font-weight: normal !important;
    position: relative;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between
}

.wp-block-rank-math-toc-block h2:after {
    display: inline-block;
    margin-top: 8px;
    margin-right: 8px;
    content: "";
    width: 0;
    height: 0;
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: all linear .3s;	
}

.wp-block-rank-math-toc-block h2.active:after {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.wp-block-rank-math-toc-block nav {
    padding: 10px 10px 0px 10px;
    max-height: 0;
    overflow: hidden;
    transition: all linear .3s;
}

.wp-block-rank-math-toc-block input:checked + h2 ~ nav {
    max-height: 100vh;
    overflow: visible;
}

Hope that helps and please don’t hesitate to let us know if you have any other questions.
 
Thank you.