Skip to content

ocodia/AutoToc

main
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?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 

AutoToc

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.

Examples

Features

  • 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

Usage

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:

<script>
      AutoToc("toc");
</script>

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.

Options

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.

About

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.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published