Generate List Based Table Of Contents For Long Document – html-contents

html-contents is a standalone JavaScript library which dynamically generates semantic, SEO-friendly, hierarchical table of contents from heading elements within your long document.

How to use it:

Create a container element to hold the table of content.

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

The library automatically generates anchor links from heading elements, you can customize the anchor names using the ID attribute.

<h2 id="custom-anchor">Heading</h2>

Initialize the html-contents library and we’re done.

document.addEventListener("DOMContentLoaded", function(event) {
  htmlContents('#toc')
})

Specify the min/max levels of headings.

htmlContents('#toc',{
 
  // h2
  top: 2,
  // h3 
  bottom: 3
  
})

Enable/disable anchor links within the table of contents.

htmlContents('#toc',{
 
  addIds: true, 
  addLinks: true
})

Customize the list type. ‘u’ or ‘o’ – (u)nordered or (o)rdered list type.

htmlContents('#toc',{
 
  listType: 'u'
})

Ignore specific heading elements.

<h3 class="ignore">Heading</h3>

htmlContents('#toc',{
 
  filter: '.ignore'
})

Changelog:

v0.2.0 (2020-09-09)

• Allow multiple TOC inserts by using querySelectorAll

v0.1.7 (2019-09-17)

• Pass a string or function to filter option.

v0.1.6 (2019-07-12)

• better regex for header names, no console.log