Minimal jQuery Table Of Contents Plugin

File Size: 72KB
Views Total: 756
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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>

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

<script src=""></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() {
id: "#tableofcontents"

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.

#tableofcontents ul {
#tableofcontents ul li {

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