Collapsible Section in Rank Math ToC Block

Hello,

Although the solution we shared from the other ticket will not make the very same style and behavior you want, it should give you the same functionality.

Can you please confirm if you have successfully added both the Javascript and CSS code as instructed on this reply?

If you are still having trouble applying the code, we might need to take a closer look at the settings. Please edit the first post on this ticket and include your WordPress & FTP logins in the designated Sensitive Data section.

Please do take a complete backup of your website before sharing the information with us.

It is completely secure and only our support staff has access to that section. If you want, you can use the below plugin to generate a temporary login URL to your website and share that with us instead:

https://wordpress.org/plugins/temporary-login-without-password/

You can use the above plugin in conjunction with the WP Security Audit Log to monitor what changes our staff might make on your website (if any):

https://wordpress.org/plugins/wp-security-audit-log/

We really look forward to helping you.

Hello,

We’ve tried to check your website but the temporary login you’ve shared is redirecting to your homepage.

However, you can try to add the following Custom CSS on your website and see if that works for you:

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

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

.wp-block-rank-math-toc-block h2 button.toggle-button:focus{
	outline: none !important;
}

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

Here’s a guide you can follow to add this custom CSS to your site:
https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

Once done, please add this filter to your site: https://pastebin.com/KW6PYPzc

Here’s how you can add filter/hook to your WordPress site:
https://rankmath.com/kb/wordpress-hooks-actions-filters/

Let us know how it goes. Looking forward to helping you.

Thank you.

Hello,

Unfortunately, the image links you’ve shared are not working. However, we’ve checked your page and we can see that the jQuery is not loading on your site, and possibly that’s why the issue is occurring.

In this case, you can try to add the Google jQuery CDN before the script tag and see if that works for you.

Here you can check the full code with Google jQuery CDN: https://pastebin.com/LqxCndcB

Let us know how it goes. Looking forward to helping you.

Thank you.

Hello,

We might need to take a closer look at the settings. Please extend the temporary login access in the sensitive data section so that we can check this issue further for you.

Looking forward to helping you.

Thank you.

Hello,

We’ve modified the code and added it to your theme’s functions.php file and now the Table of Contents is working properly also your primary menu is showing in the header and footer without any issue.

Please check the screencast in the sensitive data section for your reference.

However, there was no ToC added to your post and that’s why we had to add this for troubleshooting. We kept the ToC on your post so that you can check it from your end.

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