function removeTOC(){ var topText="(top)";$( "#tableOfContents" ).empty();$("a:contains(" + topText + ")").remove(); }

Introduction

Many applications such as Google Docs, Word and Confluence create a table of contents automatically for you if you make heading tags in your document <h1>, <h2>, etc.

This is how to do it using jQuery! In this blog post and video I will show you how to write a simple function in jQuery that will do it for you on any web page. This is great for Blogs and other content. It is running on this page!

Having a Table of Contents built like this also lets you provide a deep link to your page. This will let you share a link to a specific part of your document using <a name="myName">Links</a>. This feature has been part of HTML since the beginning but is frequently underutilized.

To create a deep link to a <a name="target"></a> Add a #target to the URL:

https://seniorwebdeveloper.teachable.com/blog/199064/how-to-make-a-table-of-contents-automatically-using-jquery#TL:DR:finishedcode

This link will go to the #TL:DR:finishedcode area on the page. Try it!

If you want to follow along on this page, right click to inspect element and open the console. You can click on this button to remove the table of contents code so that you can try this for yourself!

TL:DR: finished code

Approach

Better solutions are almost always simpler ones. In my example, jQuery was already running on the page.

This approach is good for most web projects and tasks

  • First make a plan for what you want to accomplish.
  • Define what it will look like when you are done.
  • Break the task into steps
  • Use tools to work on one part of the task at a time
  • Experiment and keep track of your progress, you may wish to go back to a previous iteration
  • Finish!

The General Idea

I want to have a <div> element at the top of the page to hold the Table of Contents

It will contain links to <a name="target"></a> in the document that need to be created

There will be a link back to the (top)

Tasks

  1. Write jQuery that will find the Headers in the document
  2. Create an Each Loop

As I loop over the header tags,

  1. Make a slug (remove the spaces) so that the slug can be used as a target
  2. Append an anchor tag to the Table of Contents Div
  3. Prepend a named anchor <a name="target"></a> to the heading
  4. Add a link back to the TOP.

Find the Header tags

Right click on this page to Inspect element


Select the target to define it:


Now we found the correct target we can write jQuery to select all of the headers inside the div with the class of post-content:

$('div.post-content :header')

Paste that into the Console:

Loop Through the Header Tags

jQuery has an .each() function: https://api.jquery.com/jquery.each/ .

Paste this into the console:

You should see something like this:

Now make a slug by removing spaces inside the each():


Add the links to the Table of Contents Div

You will need to create an empty DIV on the page for this, or find an existing DIV where you would want to create the Table of Contents:

$( "#tableOfContents" ) will find <div id="tableOfContents"></div>.

So to add the slugs to the table of contents, remove the table of contents code and run this in the console:

As you can see, it does not look like much but we can confirm that we are targeting the element correctly and putting text in there.

Now create link text for the anchor tags.

Notice that you are adding a "#" to the slug. That is an internal link in HTML.

These links won't go anywhere yet, but you can check to see that they appear the way you want them to:


Create Target Links

To create the target links, we need to modify the <h1> tags to contain a link. These will go back to the top. In the HTML/DOM, they will look like this: <a name="BigHeading" href="#top">(top)</a>. We use a jQuery command called before() https://api.jquery.com/before/ to put the content BEFORE the <h1>. Within the each() function "this" is the <h1> element being passed in:

Now when you paste that into the console, the links will work:

However, they are hidden under the menu bar which is an overlay of the Teachable framework:

Add an Animation to Move the View Window

So now we need to move the view window after the link has been clicked. This method uses "setTimeout" to perform an action after waiting for 100 milliseconds.

We are setting the text of the animation code to a variable so that it is easier to edit and understand:

Live Coding Video

For those that learn better by watching here is a live coding video that shows how this was made, with more struggling involved!

Conclusion

So there you have it! A way to make a Table of Contents using jQuery. Want to learn anything else? Leave a message in the comments.

References: May contain affiliate links!

https://api.jquery.com/

There are many books on jQuery. JQuery is now in version 3, so pick a modern book. 95% of jQuery2 still works in jQUery3. These are 2 books that I recommend: