JavaScript table of contents generator – TocJS

A JavaScript table of contents generator implemented as highly configurable jQuery plugin.

JavaScript table of contents generator in action

TocJS is a jQuery plugin for generating table of contents, based on headings. The TOC is generated using nested ul or ol elements with hash-link anchors to the headings.

Key features:

– Generate anchor link for heading

– Allow to define different format for each heading level

– Automatically scroll to with the help of Bootstrap ScrollSpy plugin

– Easy to customize look and feel

Usage

TocJS can generate a table of contents based on the headings (h1 to h6) found on page.

So include the libs:

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="toc.js"></script>

Call the plugin:

$(document).ready(function() {
    $('element selector').toc();
});

Plugin options:

– selector (default value is h1, h2, h3, h4, h5, h6)

– elementClass (toc)

– rootUlClass (toc-ul-root)

– ulClass (toc-ul)

– prefixLinkClass (toc-link-)

– heading (null)

– indexingFormats ({})

Example:

$(element).toc({
    indexingFormats: {
        <headingLevel>: '<formatter>'
    }
});

We can define different formatter for each heading level, e.g.:

$(element).toc({
    indexingFormats: {
        'h1': 'upperAlphabet',
        'h2': 'number',
        'h3': 'lowerAlphabet'
    }
});

$(element).toc({
    indexingFormats: {
        'h1': 'A',
        'h2': '1',
        'h3': 'a'
    }
});

$(element).toc({
    indexingFormats: 'A1a'
});

License: MIT

Demos:

Styling with Bootstrap

Scroll

Get JavaScript table of contents script from GitHub:

https://github.com/nghuuphuoc/tocjs

See also:

Table of Contents jQuery Plugin

Enjoy!