How to make use of it:

1. Load the stylesheet toctoc.css for the default model of the table of contents.

<link rel="stylesheet" href="toctoc.css" />

2. Create an empty container by which the TOC field can be positioned.

<div id="toctoc"></div>

3. Load the jQuery JavaScript library and the jQuery toctoc.js plugin.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/toctoc.js"></script>

4. Initialize the plugin to generate a table of contents.

$(function(){
  $.toctoc();
});

5. Customize the looks of the table of contents.

$.toctoc({
  headBackgroundColor: '#1c1c1c',
  headTextColor: '#fff',
  headLinkColor: '#add8e6',
  bodyBackgroundColor: '#f5f5f5',
  bodyLinkColor: '#000',
  borderStyle: 'solid',
  borderColor: '#000',
  borderWidth: '2px'
});

6. Customize the title of the TOC field.

$.toctoc({
  headText: 'Table of contents'
});

7. Customize the present/cover labels.

$.toctoc({
  headLinkText: ['show', 'hide']
});

8. Determine whether or not to collapse the TOC field on the web page load.

$.toctoc({
  minimized: false
});

9. Determine the container by which the plugin appears for heading parts.

$.toctoc({
  target: 'article'
});