Create a List-Based Table of Contents for the Long Document | HTML-Contents

Creates a table of contents in the DOM element optionally linked with anchors.

HTML Content is a standalone JavaScript library that dynamically creates a semantic, eco-friendly table of contents and hierarchy of title elements within your long document.

Read More – How to Create a Hierarchical Table of Contents in Javascript Plugin | Easy-TOC

How to make use of it:

Create a container aspect to hold the table of content.

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

The library routinely generates anchor links from heading components, you’ll be able to customize the anchor names using the ID attribute.

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

Initialize the HTML-contents library and we’re performed.

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

})

Read More – Automatically Adding a Table of Contents on Website | Toctoc

Customize the listing type. ‘u’ or ‘o’ – (u)nordered or (o)rdered checklist kind.

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

})

Ignore specific heading elements.

<h3 class="ignore">Heading</h3>
htmlContents('#toc',{
 
  filter: '.ignore'

})

Generate List Table Of Contents, HTML-Contents Plugin/Github

Read More – Jquery UI Sort Plugin For Easy Sortable Tree-Type Structure | treeSortable


See Demo And Download

Official Website(psalmody): Click Here

This superior jQuery/javascript plugin is developed by psalmody. For extra Advanced Usage, please go to the official website.

Share