jQuery Plugin For Dynamic Nested Table Of Contents - Taoco
File Size: | 10.6 KB |
---|---|
Views Total: | 1411 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.