Easy jQuery Table Of Contents Plugin - erToc

erToc is a simple and fast jQuery plugin for automatically generating a table of contents for your web page. A table of contents provides links to sections and subsections of the same document.It allows readers to go directly to a specific section of an on-line document. (Learn more about Table Of Contents Technique)

You might also like:

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

Basic Usage:

1. Markup html structure

<div id="example1">
<h1>...</h1>
<h2>...</h2>
</div>

<div id="example2">
<h1>...</h1>
<h2>...</h2>
</div>

<div id="example3">
<h1>...</h1>
<h2>...</h2>
</div>

...

2. The CSS

.er_toc {
float: right;
font-size: 10pt;
max-width: 35%;
padding: 5px 10px;
background: #F1F1F1;
border: solid 1px #DADADA;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 0 0 10px 15px;
}
.er_toc ul, .er_toc ol {
margin: 0;
padding: 0;
}
.er_toc li {
padding-top: 5px;
list-style: none;
}
.er_toc ul ul, .er_toc ol ol {
margin-left: 20px;
}
.er_toc .er_toc_title {
display: block;
font-weight: bold;
border-bottom: 2px solid #ccc;
margin-bottom: 5px;
}
.er_toc .er_toc_title_close {
color: #CCC;
}
.er_toc .er_toc_title span {
display: inline-block;
border: 0px solid #fff;
width: 0px;
overflow: hidden;
height: 0px;
margin: 0 0 0 3px;
}
.er_toc .er_toc_title_open span {
border-width: 0 5px 6px;
border-color: #333 #F1F1F1;
}
.er_toc .er_toc_title_close span {
border-width: 5px 5px 0px;
border-color: #ccc #F1F1F1;
}
a.er_toc_top {
display: inline-block;
border: 0px solid #fff;
width: 0px;
overflow: hidden;
height: 0px;
margin: 0 0 0 5px;
border-width: 0 6px 12px;
border-color: #999 #fff;
}
a.er_toc_top:hover {
border-color: #1982D1 #fff;
}
.er_toc_disc ul, .er_toc_disc ol {
margin-left: 20px;
}
.er_toc_disc li {
list-style: disc;
}

3. Include jQuery library and erToc.js on your web page

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

4. The javascript

<script type='text/javascript'>
$(document).ready(function() {
    $('#example1').erToc({'goTopNode':'#example1', 'startLevel': 'h2', 'numberedSuffix':'. '});
    $('#example2').erToc({'goTopNode':'#example2', 'startLevel': 'h2', 'tocScroll': false});
    $('#example3').erToc({'goTopNode':'#example3', 'startLevel': 'h2', 'numbered': false, 'tocClass': 'er_toc er_toc_disc'});
});
</script>

---

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