Document Outline Generator With jQuery - docout

docout is a jQuery based document outline generator which automatically extracts heading elements within the document and converts them into a nested navigation list so that the users are able to navigate between corresponding sections with ease. Also known as Table Of Contents.

1. Import the latest version of jQuery library and the jQuery docout.js plugin into the html page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
<script src="jquery.docout.js"></script>

2. Create a contain in which you want to place the document outline.

<div id="document-outline"></div>

3. Call the function on the body tag. This will look for all heading elements ("h1", "h2", "h3", "h4", "h5", "h6", "h7", "h8") and generate a table of contents inside the container you just created.

$(document).ready(function() {
  $('body').docout();
});

4. Specify the headling elements to be outlined - order matters.

$(document).ready(function() {
  $('body').docout({
    elements: [ "h1", "h2", "h3", "h4", "h5", "h6", "h7", "h8" ]
  });
});

5. Specify the target container where the document outline will be prepended.

$(document).ready(function() {
  $('body').docout({
    target: ".container"
  });
});

6. More default configuration options.

$(document).ready(function() {
  $('body').docout({
    // Whether the document oultine should be calculated
    // immediatelly or explicitly via public command.
    immediate: true,
    // The css class to be appended to the root Wrap
    rootClass: "docout-root-wrap",
    // The css class to be appended to each child Wrap
    childClass: "docout-child-wrap",
    // Whether the outline should replace target's content
    // or be prepended to it
    replace: false,
    // Function to be used to generate the link
    gntLink: _gntLink,
    // Function to be used to generate the link wrapper
    gntLinkWrap: _gntLinkWrap,
    // Function to be used to generate the outer wrapper of the document outline
    gntRootWrap: _gntRootWrap,
    // Function to be used to generate each child outline
    gntChildWrap: _gntChildWrap,
    // Function to be used to resolve the id of each outline link href
    gntId: _gntId
    
  });
});

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