jQuery Plugin For Simple Table of Contents - toc

jQuery Plugin For Simple Table of Contents - toc
File Size: 88.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.