Table of Contents jQuery Plugin

Would you like to add TOC (table of contents) at your web project, e.g. publishing long articles or books on-line? This simple plugin helps!

Table of Contents jQuery solution

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

The generated TOCs are semantic, nested lists (ul or ol) with hash-link anchors to the headings.

Table of contents / TOC plugin
Table of contents / TOC plugin

Usage

You can download the latest release, or install with 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.

Example – using data attributes:

<ul data-toc></ul>

With options:

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

Example – using the JavaScript programmatic API:

<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>

That’s it. Few lines and ready!

The plugin is licensed under the Apache License, version 2.0.

Homepage:

http://ndabas.github.io/toc

Get it from GitHub:

https://github.com/ndabas/toc

Enjoy!

Share:Share on Facebook3Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1