Fold on clicking link in TOC

Hi,

It is not possible by default. However if you know how to code with javascript, you could probably achieve this by replacing the “joli-unfolded” class to “joli-folded” (from the wrapper div #joli-toc-wrapper) after clicking a link.

Cheers!

Thanks man! I’m not a programmer, but I managed to make it work just like you said.

Great!

Feel free to share your solution for anyone interested ??

This is the jQuery script I found and used:

<script>
jQuery(“.toc-container-close”).click(function() {
jQuery(this).closest(“.toc-container-close”).toggleClass(“.toc-container-open”);
});
</script>

This is the css I used:

.toc-container.close {
width: 35px;
height: 35px!Important;
overflow: hidden;
border: solid 2px #ddd;
background: #fff;
}

.toc-container-open {
width: auto;
height: auto;
overflow: auto;
border: solid 2px #ddd;
background: #fff;
}

.toc-container-close is the css class of the Elementor section the WPJoli shortcode is in. On default it is a closed round button:

On click on the round button, or any of the links that are inside the .toc-container-open the class is every time toggled between .toc-container-close and .toc-container-open.

Making it this way gave me more control to put other things in the TOC container.
Not exactly like you said, but the idea is the same.

Thank you for sharing your solution ??

Cheers!