Elementor Close Table of Content on Anchor Link Click
Get Premium

Elementor Close Table of Content on Anchor Link Click

Element.How also offers premium tutorials! Check them here:

Elementor Close Table of Content on Anchor Link Click

Table of Contents

In this tutorial, I will show you how to close the Elementor Pro table of content on clicking a link.

This is very useful for tablet and mobile in particular, where you might want to have an Elementor sticky table of content, but have it collapsed by default, and auto collapsing back when clicking an anchor link.

Here is a live demo:

First, go to your single post template where the Elementor table of content is

Add an HTML element at the end of your template, and copy paste the code in it:

Elementor Close Table of Content on Anchor Link Click 1

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Close Table of Content on Anchor Link Click tutorial 
 * Found at this URL https://element.how/elementor-close-table-of-content-on-link-click/ 
 */ 
</script>

Adjusting the code

There isn't much to do, the code takes care of everything.

There is just this line, which makes the code run only for tablets and mobile:

if (window.innerWidth > 1024) return;

If you want the automatic table of content collapsing only on mobile, you could change it to:

if (window.innerWidth > 767) return;

Or, delete the line completely, and the code will run on all viewports.

Extra: make the whole title clickable, instead of just the small icon

Add this CSS to make the entire title of the table of content clickable to toggle it open and close.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Close Table of Content on Anchor Link Click tutorial 
 * Found at this URL https://element.how/elementor-close-table-of-content-on-link-click/ 
 */ 
</script>

With this CSS, it's much more user friendly!

Finally, enjoy your Elementor automatically closing table of content!

I hope you have enjoyed this tutorial!

Cheers!

Elementor Close Table of Content on Anchor Link Click

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

6 Responses

    2. Just to let you know, I added another small UX improvement : Extra: make the whole title clickable, instead of just the small icon.

  2. Maxime!! This is great! For ages I've been wanting the TOC to behave this way... both close on click and click the whole header. Thank you for the great work! Whenever I need to improve Elementor, I come to your tutorials first... I always find clean simple code that doesn't skip on accessibility.

    1. Btw, not related to your code, but Elementor's TOC fixed behavior (since it's inception):
      The first time you click on it and go to one item, once you scroll and lift the finger, the content corrects it's position it snaps upwards. You can see this especially the more items you have and if you click on the second item and scroll up to where the toc original position is. It looks like the space the expanded TOC occupies, is there until you scroll, then it corrects itself to the collapsed space, making the content to flash and move. You cannot see this if you disable the collapse option (which is of no use on mobile).

    2. Hey Joao!

      Thanks for the kind words!

      Yes I see the issue you mention... There is so much Elementor could improve with this table of content element. For that particular issue I will leave it up to them, as it's not too simple to add code to fix this... the proper way would be to fix the native code.

      Cheers!

Leave a Reply