Accordion-style Sticky Table Of Contents - jQuery Catalog.js

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.