jQuery Plugin For Dynamic Nested Table Of Contents - Taoco

Taoco is a lightweight jQuery based TOC generator plugin that automatically and dynamically generate a nested table of contents from specified heading elements inside the document. With additional support including smooth scroll, scroll spy and exclusion.

How to use it:

1. Include the taoco.css file in the head section for basic TOC styles.

<link rel="stylesheet" href="css/taoco.css">

2. Create a DIV container where 'taoco' renders the dynamic TOC list.

<nav id="toc">
</nav>

3. Include jQuery library and the jQuery Taoco plugin's script at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.taoco.js"></script>

4. Initialize the plugin to render a TOC list inside the DIV container you just created.

$( '#toc' ).taoco({
  // options here
});

5. Customization options available.

$( '#toc' ).taoco({

  // target container
  scope                   : 'body',

  // headling elements
  headings                : ['h2','h3'],

  // title of the TOC list
  title                   : 'Table of contents',

  // list type
  listType                : 'ul',

  // an array of elements you want to exclude
  exclude                 : ['.exclude'],

  // highlight active elements
  highlight               : true,

  // enable smooth scroll
  smoothScroll            : true,

  // scroll duration
  smoothScrollDuration    : 500,

  // in px
  headingOffset           : 50,

  // add an additional class to the nav container
  additionalClass         : '' 
  
});

---

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