Make Webpage Easy To Navigate With A Table Of Contents - toctoc.js

Make Webpage Easy To Navigate With A Table Of Contents - toctoc.js
File Size: 6.67 KB
Views Total: 101
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A tiny jQuery TOC plugin that makes a long webpage (like a documentation page) easy to navigate through a customizable, SEO-friendly table of contents.

The plugin generates a collapsible TOC box containing a list of anchor links where the ID and Href are generated from all heading elements found within the document.

How to use it:

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

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

2. Create an empty container in which the TOC box will be placed.

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

3. Load jQuery JavaScript library and the jQuery toctoc.js plugin at the end of the document.

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

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

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

5. Customize the appearance 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 box.

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

7. Customize the show/hide labels.

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

8. Determine whether to collapse the TOC box on page load. Default: true.

$.toctoc({
  minimized: false
});

9. Determine the container in which the plugin looks for heading elements. Default: 'body'.

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

This awesome jQuery plugin is developed by ThibaudArros. For more Advanced Usages, please check the demo page or visit the official website.