JSTOC

About

JSTOC is a javascript table of contents generator that uses DOM manipulation to read the page and built a hierachical, linked list in the page. It’s capable of inserting section numbers into the heading elements themselves, and also dynamically inserts hyperlinks to each one.

The algorithm is based on one by Matt Whitlock, who has produced some fairly awesome little tools—Thanks Matt.

Download

The tool can be downloaded from its git summary page, or simply copy-paste it from the source of this page.

Use

Simply include the javascript in your web page and call generateTOC() with a reference to an empty element. That element will be filled with a table of contents. One simple way is to call it using onload:

  </head>
  <body onload="generateTOC(document.getElementById('toc'));">

  <div id='toc'><div>

You may also wish to quash the bullet points/numbering using a little snippet of CSS:

div#toc ol{
  list-style-type: none;
}

Configuration

The script is fairly configurable by changing some variables at the top of the function:

  • toclim — Limits on what to put in the table of contents (i.e. from h1 to h4, use [1,4])
  • headlim — Limits on what to put in the headings (i.e. from h1 to h3, use [1,3])
  • heading_nums — Set to true to place numbers on the headings in the document.
  • link_nums — Set to true to place numbers on the links in the TOC.