HelpSite Support Center

Contact Us

Building a Table of Contents inside an article

By default HelpSite does not automatically display a table of contents at the top of your articles. But if you do want an outline of your article to appear at the top or in a sidebar, you do have options!

Manually create Table of Contents

If you want to selectively decide what an article's table of contents should contain and have full control on a per-article basis, you can manually create a table of contents at the top of your articles using our article editor. To link to sections within the same page, see: Using heading links to direct users to a specific part of an article

Automatically generate Table of Contents

However, this is something that you can add by taking advantage of both our Heading links and Custom HTML/CSS features.

Below is an example Article template that you can use if you would like to automatically have a table of contents generated on any article page that contains Headings/Subheadings. It will look like this be default, but can be customized further:

Copy the following code and replace the "Article" template under Customize > Layout & HTML > Article, then ensure the "Use a custom layout" checkbox is enabled.

Paste the following code and save. 

<article class="fr-view">


    {{ article.title | escape }}


  <!-- <p><em>Last updated: {{ article.updated_at | date: "%b %d, %Y" }}</em></p> -->

  <div class="toc" style="display: none; border: solid 1px #ddd; padding: 15px 15px 5px 15px; margin-bottom: 20px; width: fit-content;">

    <p>Table of contents:</p>


  {{ article.text }}


<!-- Table of Contents -->

<script type="text/javascript">

  function buildTableOfContents(selector = 'h1[id]:not(:first-of-type), h2[id], h3[id], h4[id], h5[id], h6[id]') {

    // Select the article tag

    const article = document.querySelector('article');


    // Select all the heading tags within the article

    const headings = article.querySelectorAll(selector);

    if (!headings.length) return;


    // Create an ordered list element to serve as the table of contents

    const tocList = document.createElement('ul');


    let currentList = tocList;

    let prevLevel;


    // Iterate over all the headings, create a list item element for each one,

    // and append it to the table of contents list

    headings.forEach((heading) => {

      const listItem = document.createElement('li');

      const link = document.createElement('a');

      link.textContent = heading.textContent;

      link.href = `#${}`;



      // Determine the nesting level of the heading tag

      const level = parseInt(heading.tagName.charAt(1));


      if (prevLevel !== undefined && level > prevLevel) {

        currentList = tocList.lastChild.appendChild(document.createElement('ul'));

      } else if (level < prevLevel) {

        currentList = currentList.parentElement;




      prevLevel = level;



    return tocList;



  document.addEventListener('DOMContentLoaded', (event) => {

    const toc = buildTableOfContents();

    if (toc) {


      document.querySelector('.toc').style.display = 'block';




Let us know if you have any issues!