Highly Configurable jQuery Table of Contents Plugin - TocJS

Yet another jQuery plugin to generate a table of content from headings in the document for long content page. The table of contents are generated using nested ul or ol elements with hash-link anchors to the headings.

Basic Usage:

1. Load the necessary javascript library files in the html document.

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

2. Load the Bootstrap 3 CSS and javascript files in the document (Optional).

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

3. Create an empty container for the table of contents.

<div id="toc"></div>

4. The optional CSS styles to style the table of contents.

.toc {
border: 1px solid #ddd;
border-radius: 4px;
}
.toc.affix {
position: static;
}
.toc .nav > .active > a, .toc .nav > .active:hover > a,  .toc .nav > .active :focus > a {
border-right: 2px solid #428bca;
}
.toc .nav .nav {
display: block;
margin-bottom: 8px;
}
.toc .nav .nav > li > a {
font-size: 90%;
}
.toc .toc-heading {
color: #333333;
background-color: #f5f5f5;
border-bottom: 1px solid #dddddd;
}
.toc .toc-link-2 {
padding-left: 25px;
}
.toc .toc-link-3 {
padding-left: 50px;
}
.toc .toc-link-4 {
padding-left: 75px;
}
.toc .toc-link-5 {
padding-left: 100px;
}
.toc .toc-link-6 {
padding-left: 125px;
}
 @media screen and (min-width: 992px) and (min-height: 700px) {
.toc.affix {
position: fixed;
}
.toc .nav > .active > ul {
display: block;
}
}

5. Dont' foget to add heading tags to the content sections.

<h2>Heading 1</h2>
...
<h2>Heading 2</h2>
...
<h2>Heading 3</h2>
...

6. Initialize the plugin with options.

<script type="text/javascript">
$(document).ready(function() {
$('#toc').toc({
selector: 'h1, h2, h3, h4, h5, h6',
elementClass: 'toc',
rootUlClass: 'toc-ul-root',
ulClass: 'toc-ul',
prefixLinkClass: 'toc-link-',
heading: 'Table of Contents'
});
});
</script>

---

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