Hello,
Thank you for your query and we are so sorry about the trouble this must have caused.
To get this feature you could try adding the additional CSS like so:
.wp-block-rank-math-toc-block.expanded h2:before {
transform: rotate(90deg);
}
And also add a transition to the parent element with the following:
transition: transform 0.3s ease;
After that, you just need to use JavaScript to add or remove a class from the element upon clicking it with something like this:
const tocTitle = document.querySelector(".wp-block-rank-math-toc-block h2");
tocTitle.addEventListener("click", function(event) {
const clickedElement = event.target;
if (clickedElement.classList.contains("expanded")) {
clickedElement.classList.remove("expanded");
} else {
clickedElement.classList.add("expanded");
}
});
This might need to be further modified on your website but it should help give you a starting point that you can modify further to get the desired result.
Don’t hesitate to get in touch if you have any other questions.
Thank you very much Miguel!
I unfortunately encountered an error when adding the JavaScript. It gives me the error:
syntax error, unexpected ‘)’, expecting variable (T_VARIABLE)
It’s in the line with tocTitle.addEventListener(“click”, function(event) {
What may cause that issue and how to resolve it?
I used the custom rank-math.php file to add the code.
Thanks in advance and best regards,
Max
Edit: When I replace the function(event) with function($event) the error goes away, but a new one arises: syntax error, unexpected token “const”
That’s in the next line with const clickedElement = event.target;
I use PHP 8.0
Hello,
Please try to add the following custom CSS and see if that works for you:
.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;
}
Once done, please try to add this filter on your site: https://pastebin.com/TeDpNZZZ
Let us know how it goes. Looking forward to helping you.
Thank you.
That worked perfectly, thanks a lot Rakibuzzaman! 🙂 Have a great weekend, and thanks for always helping me out 🙂
Hello,
We’re glad that this resolved your issue.
Please feel free to reach out to us again in case you need any other assistance.
We are here to help.
Thank you.
