Table of contents

source | script

Usage

A table of contents can be used to provide an index of headers or sections on a page. These are particularly useful for long documents.

Markup

The table of contents is generated by a script. The script will include links to all elements in the article that match the selector parameter seen in the script below. This defaults to h3, h4, and h5 elements, but may be adjusted to include or exclude any html element as needed. It is recommended to use only header elements.

Place the <nav> element with the toc ID where you want the table of contents to appear in the document.

<nav id="toc" class="table-of-contents">
  <p><strong>Contents</strong></p>
</nav>

Place the script at the bottom of the file / article.

<script>
  jQuery(document).ready( function() {
    var TOCcontainer = document.querySelector(‘#toc’);
    var toc = initTOC({
      selector: ‘h3, h4, h5’,
      scope: ‘#content’,
      overwrite: false,
      prefix: ‘toc’
    });
    TOCcontainer.appendChild(toc);
  });
</script>

Advanced

If the content requires a custom list of links, you may omit the script above and create a manual list of anchor links instead. These links should be inside an unordered list.

<nav id="toc" class="table-of-contents">
  <p><strong>Contents</strong></p>
  <ul>
    <li><a href="#anchor">Example link</a></li>
  </ul>
</nav>

Where #anchor matches an ID used further down the page. Please read more about anchor links.