Minimal jQuery Table Of Contents Plugin

A super lightweight (~3kb unminified) jQuery plugin to automatically generate a nested table of contents based on Html heading tags (<h1>, <h2>, <h3>, etc).

Related plugins:

• jQuery Table of Contents Plugin - Tocify
• jQuery Simple Table Of Contents Plugin - tocBuilder
• Fixed Table of Contents Plugin with jQuery
• jQuery Plugin For Simple Table of Contents - toc
• Easy jQuery Table Of Contents Plugin - erToc

How to use it:

1. Create a container where you want to place the table of contents.

<div id="container">
<div id="tableofcontents"></div>
<h1>1. Heading 1</h1>
<h2>1.2. Heading 2</h2>
...
<h3>1.2.1. Heading 3</h3>
...
</div>

2. Include the jQuery library and jQuery table of contents plugin in the page.

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

3. Call the plugin on the target element.

<script type="text/javascript">
$(document).ready(function() {
$("#container").tableofcontents({
id: "#tableofcontents"
});      
});
</script>

4. The plugin will automatically create a table of contents using nested unordered lists in the container 'tableofcontents'. So that you can customize the styles of the table of contents via CSS.

<style>
#tableofcontents ul {
...
}
#tableofcontents ul li {
...
}
</style>

---

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