Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Version 0.1
By Paul Livingstone

AutoToc is a JavaScript tool that can create linked table of contents based on headings tags (e.g. <h1>) on a web page.



  • Can be scoped to any area of the page (defaults to entire body)
  • Supports nested ordered and unordered lists, as well as a straight listing of links
  • Auto-creates anchors for each heading (if they don't already exist)
  • Supports multiple instances on one page


Include AutoToc:

<script src="AutoToc.js"></script>

Add a container element to contain the table of contents:

<ol id="toc"><ol>

Generate a table of contents within the container element:


The container element determines the type of list that is displayed. A ol container will produce a nested ordered list. A ul container will produce a nested bulleted list. Any other container (e.g. div) will produce a straight list of links with no nesting.


AutoToc takes three parameters:

  1. Container element (string)
  2. Scope (string)
  3. Options (object)
AutoToc(containerElement, scope, options);

Container element (required)

The id of the html element that you want the table of contents attached to.

Scope (optional, default: document.body)

By default AutoToc will generate a table of contents for all headings within the body element of the web page. You can optionally restrict the scope by providing the Id attribute of a different html element within the web page.

Options (optional)

Options allow you to change the configuration of the table of contents.

AutoToc("toc", "contents", { showTopLinks: true, startLevel: 2 });

These can be set ahead of time by changing the defaultOptions object:

AutoToc.defaultOptions.optionName = "optionValue";

The following options are available:

  • startLevel (default: 1): Sets the lowest heading level tag that should be included in the table.
  • depth (default: 3): Sets how deep the list should nest.
  • showTopLinks (default: false): Sets if the top links should be shown.
  • topLinkToParentToc (default: false): Sets if the top links should link to the top of the document body or the table of contents itself.
  • topLinkClass (default: "autoTocTopLink"): Sets the class of top links for styling.
  • topBodyId (default: "top") AutoToc will add this Id to the document body if showTopLinks = true and and an id doesn't already exist.


Some of this code is based on Doug Neiner's excellent TableOfContents jQuery plugin. I wanted to make something similar, but without requiring jQuery or other dependencies.


AutoToc is a JavaScript tool that automatically creates a linked table of contents based on the heading tags within a web page.







No releases published


No packages published