TOC - Automatically Generate Tables of Contents

File Size: 76.3 KB
Views Total: 1387
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
TOC - Automatically Generate Tables of Contents

TOC is a completely customizable jQuery plugin that allows you to generate a table of contents for your page. It is highly customizable and is able to automatically highlight a current section of the document. 

How to use it:

1. Include jQuery Library and toc.js

<script src="jquery.js"></script>
<script src="toc.js"></script>

2. Call the plugin

<script>
$('.toc').toc({
});
</script>

3. Markup

<div class="toc">
</div>

<h1>...</h1>
.....
<h2>...</h2>
...

4. Options

$('#toc').toc({
    'selectors': 'h1,h2,h3', //elements to use as headings
    'container': 'body', //element to find all selectors in
    'smoothScrolling': true, //enable or disable smooth scrolling on click
    'prefix': 'toc', //prefix for anchor tags and class names
    'onHighlight': function(el) {}, //called when a new section is highlighted 
    'highlightOnScroll': true, //add class to heading that is currently in focus
    'highlightOffset': 100, //offset to trigger the next headline
    'anchorName': function(i, heading, prefix) { //custom function for anchor name
        return prefix+i;
    },
    'headerText': function(i, heading, $heading) { //custom function building the header-item text
        return $heading.text();
    },
'itemClass': function(i, heading, $heading, prefix) { // custom function for item class
  return $heading[0].tagName.toLowerCase();
}
});

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