Hide the Table of Contents when there are no headings in the article

A Table of Contents is the index of your web page. It provides your visitors with a clear overview of the content on your site, so they can quickly scroll to the right section. Furthermore, a Table of Contents improves your website’s findability in Google. Every reason, then, to apply this Elementor widget to your website!

What is a Table of Contents?

A Table of Contents is the index of your web page. It provides your visitors with a clear overview of the content on your site, so they can quickly scroll to the right section. Furthermore, a Table of Contents improves your website’s findability in Google. Every reason, then, to apply this Elementor widget to your website!

The problem with the Table of Contents

The Table of Contents widget in Elementor remains visible with the message “No headings were found on this page.” when there are no headings in the article. This can look untidy and cause confusion for your visitors. It is therefore desirable to automatically hide the TOC widget when there are no headings in the article. Of course, it is always better to use headings in an article. This increases readability for the user. Should you nevertheless not use headings, this snippet can provide a solution!

What does the code snippet do?

The code snippet ensures that the TOC widget is automatically hidden when there are no headings in your article. This keeps your website clean and clear without unnecessary messages.

The code snippet

document.addEventListener('DOMContentLoaded', function() {
  // Select post content with class: postContent
  var postContent = document.querySelector('.postContent');
  // Select all items you want to hide by entering the class: tocTable
  var elementsToHide = document.querySelectorAll('.tocTable');

  // Check if postContent has headings.
  // No? Hide selected items
  if (postContent && postContent.innerHTML.indexOf('<h') === -1) {
    elementsToHide.forEach(function(element) {
      element.style.display = 'none';
    });
  }
});

How to apply the snippet

Step 1

The article you have written is displayed using the Post Content widget in your page template. Ensure you give the Post Content widget the class “postContent”. You do this by going to the Advanced tab and entering “postContent” in “CSS Classes”.

Step 2

Add the Table of Contents widget. Enter the class .postContent in “Container” (note: including a dot before the class). Then go to the Advanced tab and enter the class tocTable in “CSS Classes”.

Step 3

Now you can add the code snippet to your website. The best approach is to use a code snippet plugin, such as Code Snippets (the free version suffices) or Insert Headers and Footers. If you do not use one of these, add the code snippet with an HTML widget at the top of your page. Do not forget to wrap the <script></script> tag around your code!

Conclusion

With this simple code snippet, you can ensure that the TOC widget in Elementor is not visible when there are no headings in your article. This results in a neater and more user-friendly website!