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.