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

Category: Javascript , Menu & Navigation | July 12, 2019
Author: psalmody
Views Total: 128
Official Page: Go to website
Last Update: July 12, 2019
License: MIT

Preview:

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

Description:

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.1.6 (2019-07-12)

  • better regex for header names, no console.log

You Might Be Interested In:


Leave a Reply