Does Your Site Have a Dynamic Table of Contents?

Adding a table of contents to your website can be a great way to enhance user experience; not only does it give your community members an overview of the content, but it also makes it easier for them to navigate the page.

At its core, a table of contents is an organized list of sections on a given page. So for it to work well, you first need to make sure that the content on your site is organized and designed optimally.

Once that’s done, you need to build out the table of contents – hopefully in an automated way so you don’t need to manually create it for each and every page on your site.

Here’s how.

Create a Table of Contents Container

In order to dynamically generate the table of contents, we first need to add the container that will hold the links to the page sections.

This can be done by either updating the page template with the appropriate HTML or using JavaScript’s document.createElement() method.

Here’s an example container:

<nav class="toc-nav" aria-label="Page Navigation">
     <ul class="toc-nav–inner"></ul>
</nav>

In this HTML, we are using a nav tag and assigning it the “toc-nav” class. We are also adding an aria-label attribute with the value of “Page Navigation” that will let assistive technologies know that this is a way to navigate the page.

Inside the nav tag, we will add a ul tag (or an ol tag, if you want an ordered list) and assign it a class of “toc-nav–inner”.

Dynamically Find Your Table of Contents Items

Once we have the HTML in place, it’s time to add items to the table of contents.

For this example, we are going to create our table of contents using the h2 heading tags on the page with jQuery.

let tocTitle = 'h2:visible';
if ( tocTitle.length ) {
     let tableElementCounter = 1;
     $( tocTitle ).each(function(index, element){
          let tableElement = $(this),
          elementText = $(this).text(),
          elementId = 'title-' + tableElementCounter,
          elementLink = '<li><a href="#' + elementId + '">' + elementText + '</a></li>';
          $('.toc-nav–inner').append(elementLink);
          $(this).attr('id', elementId);
          tableElementCounter++;
     });
} else {
     $('.toc-nav').hide();
}

In the above jQuery, we assign h2:visible to the tocTitle variable – a selector for selecting all the visible h2 tags on the page. Then, we search for h2s on the page. If there are none, we hide the container for the table of contents.

If there are h2 tags present, we assign “1” to the tableElementCounter variable. Then, we loop through each h2, assign its text to elementText variable, create a unique ID that has the tableElementCounter variable preceded by “title-” and assign it to the elementId variable.

From there, we create an elementLink variable whose value is an li tag with an anchor link. We assign the elementId variable (preceded by a #) as a href attribute to the anchor link and the elementText variable as its text.

Lastly, we append this list item to the element with “toc-nav–inner” class, and assign the elementId variable as an ID attribute to the current h2 in the loop and increment the tableElementCounter variable by 1 (this ensures that a unique anchor link is created for each h2).

Smooth Scrolling to Each Linked Section

We’ve dynamically created the table of contents – but since the items are created via jQuery, clicking on each link won’t yet jump the user to the right place on the screen.

We need to add the following jQuery script that will take the user to the correct h2 and section on the screen, with a smooth scrolling animation.

$(document).on('click', '.toc-nav a', function() {
     let target = $(this.hash);
     if (target.length) {
          $('html, body').animate({
               scrollTop: target.offset().top
          }, 1000);
     return false;
     }
});

With just a few lines of code, you can dynamically create a table of contents for any of your pages, making them more scannable and navigable.

If you need help implementing a table of contents on your website or for any other digital marketing needs, reach out to us.