Minimal jQuery Table Of Contents Plugin
File Size: | 72KB |
---|---|
Views Total: | 753 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A super lightweight (~3kb unminified) jQuery plugin to automatically generate a nested table of contents based on Html heading tags (<h1>
, <h2>
, <h3>
, etc).
Related plugins:
- jQuery Table of Contents Plugin - Tocify
- jQuery Simple Table Of Contents Plugin - tocBuilder
- Fixed Table of Contents Plugin with jQuery
- jQuery Plugin For Simple Table of Contents - toc
- Easy jQuery Table Of Contents Plugin - erToc
How to use it:
1. Create a container where you want to place the table of contents.
<div id="container"> <div id="tableofcontents"></div> <h1>1. Heading 1</h1> <h2>1.2. Heading 2</h2> ... <h3>1.2.1. Heading 3</h3> ... </div>
2. Include the jQuery library and jQuery table of contents plugin in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="src/jquery.tableofcontents.js"></script>
3. Call the plugin on the target element.
<script type="text/javascript"> $(document).ready(function() { $("#container").tableofcontents({ id: "#tableofcontents" }); }); </script>
4. The plugin will automatically create a table of contents using nested unordered lists in the container 'tableofcontents'. So that you can customize the styles of the table of contents via CSS.
<style> #tableofcontents ul { ... } #tableofcontents ul li { ... } </style>
This awesome jQuery plugin is developed by jongha. For more Advanced Usages, please check the demo page or visit the official website.