Wat is een Table of Content?
Een Table of Contents is de inhoudsopgave van je webpagina. Het biedt je bezoekers een duidelijk overzicht van de content op je site, zodat ze snel naar de juiste sectie kunnen scrollen. Bovendien verbetert een Table of Contents de vindbaarheid van je website in Google. Alle reden dus om deze widget van Elementor toe te passen op jouw website!
Het probleem van de Table of Content
De Table of Contents widget in Elementor blijft zichtbaar met de melding “No headings were found on this page.” wanneer er geen koppen in het artikel staan. Dit kan er rommelig uitzien en verwarring veroorzaken bij je bezoekers. Daarom is het wenselijk om de TOC widget automatisch te verbergen als er geen koppen in het artikel aanwezig zijn. Het is natuurlijk altijd beter om koppen te gebruiken in een artikel. Dit verhoogd de leesbaarheid voor de gebruiker. Mocht je toch geen koppen gebruiken dan kan deze snippet uitkomst bieden!
Wat doet de code snippet?
De code snippet zorgt ervoor dat de TOC widget automatisch wordt verborgen als er geen koppen in je artikel aanwezig zijn. Hierdoor blijft je website schoon en overzichtelijk zonder overbodige meldingen.
De code snippet
document.addEventListener('DOMContentLoaded', function() {
// Selecteer postcontent met class: postContent
var postContent = document.querySelector('.postContent');
// Selecteer alle items die je wil verbergen door het invullen van de class: tocTable
var elementsToHide = document.querySelectorAll('.tocTable');
// Kijk of postContent koppen heeft.
// Nee? Verberg geselecteerde items
if (postContent && postContent.innerHTML.indexOf('<h') === -1) {
elementsToHide.forEach(function(element) {
element.style.display = 'none';
});
}
});
Hoe pas je de snippet toe
Stap 1
Het artikel wat je geschreven hebt geef je weer met de Post Content widget in je paginatemplate. Zorg dat je de Post Content widget de class “postContent” meegeeft. Dit doe je door naar de tab Advanced te gaan en “postContent” in te vullen bij “CSS Classes”.
Stap 2
Voeg de Table of Content widget toe. Vul bij “Container” de class .postContent toe. (Let op! Inclusief een punt voorafgaand aan de class). Ga daarna naar de tab Advanced en vul daar bij “CSS Classes” de class tocTable in.
Stap 3
Nu kun je de codesnippet toevoegen aan je website. Het beste werkt dit om gebruik te maken van een codesnippet plugin. Zoals Code Snippets (de gratis versie volstaat) of Insert Headers and Footers. Maak je hier geen gebruik van? Voeg dan de codesnippet toe met een HTML widget, bovenaan je pagina. Vergeet daarbij niet de tag om je code heen te zetten!
Conclusie
Met deze eenvoudige code snippet kun je ervoor zorgen dat de TOC widget in Elementor niet zichtbaar is wanneer er geen koppen in je artikel staan. Dit zorgt voor een nettere en gebruiksvriendelijkere website!
