A simple script that uses the headings in the content of the page and automatically generates a table of contents with styling.
You can see an example image of a generated TOC in this example image.
First, install the toc-generator.js
file.
Then edit the parts shown below:
// "page-contents" is where the generator will get the header elements.
var pageContents = document.getElementById("page-contents");
// "toc" is where the generator will put the table of contents.
document.getElementById("toc").appendChild(toclist);
By default, the generator uses h2
, h3
, and h4
elements while generating the TOC and reserves h1
element for the page title. But if you want to include h1
elements, just edit this variable in the toc-generator.js
file to be true
.
var includeh1 = false;
Finally, you can add this line right before the </body>
tag in your HTML file.
<script src="/path/to/toc-generator.js"></script>
If you don't want to deal with the styling, you can just install the toc-style.css
file and import it into your main css file.
@import url("/path/to/toc-style.css");
Or you can add it directly to your HTML file without importing it into your main css file by putting this line between <head>
tags.
<link rel="stylesheet" href="/path/to/toc-style.css" />
You can change main list's appearance by adding styling to the container where the script put the list (#toc
as default). Container and sublists have these classes as default:
#toc { /* your styling */ }
#toc ul { /* your styling */ }
#toc ul li { /* your styling */ }
#toc ul li a{ /* your styling */ }
.toc-sublist { /* for h2 */ }
.toc-doublesublist { /* for h3 */ }
.toc-triplesublist { /* for h4 */ }
When you exclude h1
tags, all the sublists go up one heading level.
.toc-sublist { /* for h3 */ }
.toc-doublesublist { /* for h4 */ }
.toc-triplesublist { /* this class is not used when h1 is not included */ }
If you change these classes, don't forget to also update those classes' name in the toc-generator.js
file.