Convenient Table Of Contents Generator - jQuery sh-table-of-contents.js

A simple, convenient jQuery table of contents generator that automatically generates a hierarchical, user- and SEO-friendly on page navigation from heading elements (h1~h6) within your document. The plugin also has the ability to automatically add anchor links to nav items and heading elements so you can navigate between them by click.

How to use it:

1. Create an empty container to place the generated table of contents.

<div class="myToc" id="toc"></div>

2. Put jQuery library and the sh-table-of-contents.js script at the bottom of your web page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jquery.sh-table-of-contents.js"></script>

3. Call the function to search through all the heading elements within the document and generate a default table of contents inside the container element you just created.

$(function() {
  $(".myToc").shTableOfContents();
});

4. You can also specify the target container you want to search through the heading elements.

$(function() {
  $(".myToc").shTableOfContents({
    contents : ".container"
  });
});

5. The plugin will automatically apply the following CSS classes to the table of contents so that you can style them in the CSS.

$(function() {
  $(".myToc").shTableOfContents({
    details : {
      anchor_temp_prefix : "shtoc-tp-list-item",
      data_temp_anchor_name : "data-temp-aname",
      anchor_prefix_of_toc : "shtoc-list",
      anchor_prefix_of_contents : "shtoc-item"
    },
  });
});

---

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