Accordion-style Sticky Table Of Contents - jQuery Catalog.js
File Size: | 10.6 KB |
---|---|
Views Total: | 475 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Catalog.js is a jQuery plugin for generating a sticky table of contents from page sections, which automatically collapses/expands just like an accordion.
How to use it:
1. Download the plugin and then load the jquery-catalog.min.js
script after jQuery.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/src/jquery-catalog.min.js"></script>
2. Create an empty DIV content to hold the table of contents.
<div class="toc"></div>
3. Initialize the plugin.
<div id="example"> <!-- Section 1 --> <h2 class="title">Section 1</h2> <div class="item"> <span>Section 1.1</span> </div> <div class="item"> <span>Section 1.2</span> </div> <div class="item"> <span>Section 1.3</span> </div> <!-- Section 2 --> <h2 class="title">Section 2</h2> <div class="item"> <span>Section 2.1</span> </div> <div class="item"> <span>Section 2.2</span> </div> <div class="item"> <span>Section 2.3</span> </div> ... </ul>
var toc = $('.toc').Catalog({ container: '#example', data: [ { item: 'h2', title: '.title' }, { item: '.item', title: 'span' } ], callBack: function () { // optional callback } });
4. Enable/disable the expand/collapse animations. Default: true.
var toc = $('.toc').Catalog({ container: '#example', data: [ { item: 'h2', title: '.title' }, { item: '.item', title: 'span' } ], animation: true, });
5. Enable/disable the expand/collapse animations. Default: true.
var toc = $('.toc').Catalog({ container: '#example', data: [ { item: 'h2', title: '.title' }, { item: '.item', title: 'span' } ], animation: true, });
6. Set the CSS class of the Active item. Default: 'active'.
var toc = $('.toc').Catalog({ container: '#example', data: [ { item: 'h2', title: '.title' }, { item: '.item', title: 'span' } ], active: 'current', });
.current { /* ... */ }
This awesome jQuery plugin is developed by Tiny-Fendy. For more Advanced Usages, please check the demo page or visit the official website.