Easy Table of Contents Generator In Pure JavaScript

Category: Javascript , Menu & Navigation | July 6, 2018
Views Total:573 views
Official Page:Go to website
Last Update:July 6, 2018


Easy Table of Contents Generator In Pure JavaScript


Yet another table of contents generator written in pure JavaScript.

The table of contents generator makes it easier to generate a in-page navigation from all the healing elements within the document.

Clicking the anchor links will scroll the page to the corresponding sections with hashtag support.

How to use it:

Create a container element to place the table of contents generated by JavaScript.

<div id="tc">

Insert the Table of Contents script at the bottom of the page.

<script src="js/j.js"></script>

Call the function on the target container where the library looks for all the heading elements.

tc('article','tc', document);

Apply your own styles to the table of contents.

.tc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  margin:0 .5rem
.tc h2 {
  border-bottom: 1px solid #bbb;
  color: #555;
  font-size: 15px;
  margin: 0;
  -webkit-transition: .5s all;
  -o-transition: .5s all;
  transition: .5s all
.tc a { color: #333 }
.tc h3, .tc h4, .tc h5, .tc h6 {
  font-size: 13px;
  margin: 0
.tc h3 a, .tc h4 a, .tc h5 a, .tc h6 a { color: #555 }
.tc h3:before, .tc h4:before, .tc h5:before, .tc h6:before { content: '- ' }
.tc h3 { margin-left:.5rem
.tc h4 { margin-left: 1rem }
.tc h5 { margin-left: 1.5rem }
.tc h6 { margin-left: 2rem }



  • CSS update

You Might Be Interested In:

One thought on “Easy Table of Contents Generator In Pure JavaScript

  1. david

    Hi, Looking thru “how to use” I see the container element has , then when applying styles you refer to .tc – a class – bit confusing!


Leave a Reply