jQuery Plugin For Simple Table of Contents - toc

toc is a jQuery plugin that allows to auto generate Table of Contents from the content on your single web page,  using semantic, nested lists with hash-link anchors to headings. 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. 

You may be interested in the following jQuery Table of Contents Plugins as well:

• TOC - Automatically Generate Tables of Contents
• jQuery Table of Contents Plugin - Tocify
• Fixed Table of Contents Plugin with jQuery

Basic Usage:

1. Markup

<div class="container">
<ul id="toc"></ul>
<h2>...</h2>
...
<h3>...</h3>
...
<h4>...</h4>
...
</div>

2. Include jQuery Library and toc.js in your html page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="jquery.toc.js" type="text/javascript"></script>

3. Then call the plugin with options

$("#toc").toc({content: "div.container", headings: "h2,h3,h4"});

4. You can also auto generate Table of Contents using date- attribute

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

Change log:

v0.4.0 (2016-08-10)

• update

---

This awesome jQuery plugin is developed by ndabas. For more Advanced Usages, please check the demo page or visit the official website.