HTML-Contents
Creates a table of contents in a DOM element optionally linked to with anchors. No dependencies.
Get It
We're on npm:
npm i html-contents
Download from GitHub: https://github.com/psalmody/html-contents
Use It
No jQuery needed. Just include this script:
<script src="html-contents.js"></script>
And call like this.
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// #toc is the DOM element to put the outline in
// this is querySelectorAll so use that how you will
htmlContents('#toc')
})
</script>
Optionally put some options in there:
//these are the defaults
document.addEventListener("DOMContentLoaded", function(event) {
htmlContents('#toc', {
top: 2, // 1-6: biggest header to include in outline
bottom: 3, // 1-6: smallest header to include in outline
addIds: true, // true/false: add ids to H* that don't have them
addLinks: true, //true/false: add links to outline?
listType: 'u', // 'u' or 'o': (u)nordered or (o)rdered list type
filter: false // String or function: CSS style selector to exclude from outline
// or function to filter to pass to Array.filter
})
})
See It
You can run gulp and localhost:3000 to see a working example (it's also in test/index.html)
3 Mar 12, 2022
153 Jan 2, 2023
25 Dec 29, 2022
3 Jul 12, 2021
11 Sep 7, 2022
11 Nov 10, 2022
5 May 13, 2021
5 Dec 1, 2022
7 Jul 31, 2022
4 Jun 23, 2022
17 Nov 17, 2022
10 Mar 1, 2022
8 Apr 4, 2022
14 Dec 22, 2022
38 Jun 4, 2022
3 Jan 7, 2023
32 Dec 14, 2022
9 Dec 28, 2022
10 Apr 26, 2022