Highly Configurable jQuery Table of Contents Plugin - TocJS
File Size: | 568 KB |
---|---|
Views Total: | 3542 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another jQuery plugin to generate a table of content from headings in the document for long content page. The table of contents are generated using nested ul
or ol
elements with hash-link anchors to the headings.
Basic Usage:
1. Load the necessary javascript library files in the html document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="src/js/toc.js"></script>
2. Load the Bootstrap 3 CSS and javascript files in the document (Optional).
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
3. Create an empty container for the table of contents.
<div id="toc"></div>
4. The optional CSS styles to style the table of contents.
.toc { border: 1px solid #ddd; border-radius: 4px; } .toc.affix { position: static; } .toc .nav > .active > a, .toc .nav > .active:hover > a, .toc .nav > .active :focus > a { border-right: 2px solid #428bca; } .toc .nav .nav { display: block; margin-bottom: 8px; } .toc .nav .nav > li > a { font-size: 90%; } .toc .toc-heading { color: #333333; background-color: #f5f5f5; border-bottom: 1px solid #dddddd; } .toc .toc-link-2 { padding-left: 25px; } .toc .toc-link-3 { padding-left: 50px; } .toc .toc-link-4 { padding-left: 75px; } .toc .toc-link-5 { padding-left: 100px; } .toc .toc-link-6 { padding-left: 125px; } @media screen and (min-width: 992px) and (min-height: 700px) { .toc.affix { position: fixed; } .toc .nav > .active > ul { display: block; } }
5. Dont' foget to add heading tags to the content sections.
<h2>Heading 1</h2> ... <h2>Heading 2</h2> ... <h2>Heading 3</h2> ...
6. Initialize the plugin with options.
<script type="text/javascript"> $(document).ready(function() { $('#toc').toc({ selector: 'h1, h2, h3, h4, h5, h6', elementClass: 'toc', rootUlClass: 'toc-ul-root', ulClass: 'toc-ul', prefixLinkClass: 'toc-link-', heading: 'Table of Contents' }); }); </script>
This awesome jQuery plugin is developed by nghuuphuoc. For more Advanced Usages, please check the demo page or visit the official website.