jquery.toc

Table of Contents jQuery Plugin

A minimal, tiny jQuery plugin that will generate a table of contents, using semantic, nested lists with hash-link anchors to headings.

Download

Version 0.4.0 · GitHub Project


Live Example

Table of contents, auto-generated from the content on this page:

Usage

You can download the latest release, or install with Twitter's Bower: bower install jquery.toc.

Include jQuery (>= 1.6) and jquery.toc.js/jquery.toc.min.js on your page. The plugin can then be used either via HTML5 data attributes, or via the programmatic API. See below for the available options.

Via data attributes

Minimal example:

<ul data-toc></ul>

With options:

<ol data-toc="div.container" data-toc-headings="h2,h3,h4"></ol>

Via the JavaScript programmatic API

Minimal example:

<ul id="toc"></ul>
...
<script type="text/javascript">
    $("#toc").toc();
</script>

With options:

<ul id="toc"></ul>
...
<script type="text/javascript">
    $("#toc").toc({content: "div.container", headings: "h2,h3,h4"});
</script>

Options

<ul data-toc="content" data-toc-headings="headings"></ul>
$(...).toc({content: "body", headings: "h1,h2,h3"});

The plugin has two options:

In addition, the plugin will create nested lists of the same type (ul or ol) as the element that it is called on.

Automatic ID generation

The plugin generates hash-links to the headings on the page, to allow users to jump to the heading by clicking in the generated table of contents. This feature requires that the headings have IDs assigned; if they do not, the plugin will generate and assign IDs automatically.

The generated IDs are based on the text inside the headings, and uses two simple rules:

For example, a heading like <h2>Heading 2.1</h2> will get the ID Heading_2.1.

Alternatives

If you're looking for a jQuery plugin that does more than just generate a minimal table of contents, the project wiki lists some more plugins.

License

Licensed under the Apache License, version 2.0.

Credits

Created by Nikhil Dabas.