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:
Get JavaScript table of contents script from GitHub:
https://github.com/nghuuphuoc/tocjs
See also:
Table of Contents jQuery Plugin
Enjoy!