dynamic table of contents

How we can generate an automatic table of contents using HTML CSS JS? Solution: See this Dynamic Table Of Contents With Active Link Highlight, Automatic Table.

Previously I have shared many types of tables, but this is an auto-generated table of contents. Basically a dynamic table of contents creates table items automatically of content’s heading. And these table items help you to directly navigate to the content. If you are using any CMS like WordPress then there are many plugins to do that. But we can create this for a normal website using pure JavaScript.

Today you will learn to create an automatic table of contents using JS. Basically, there are two sections one is a normal body section which contains heading and texts, and one is a sidebar that contains the table. There is not an ID and hyperlink target method, all the table items generated automatically by JavaScript. You can directly navigate to a specific section by clicking the table item link. Also when you will scroll manually, then you can see the active link because there is a color fill indicator.

So, Today I am sharing Dynamic Table Of Contents With Active Link Highlight. There I have used HTML to create the layout and contents, CSS for styling, and JavaScript for functioning.  There is a completely dynamic feature to create table items and link targeting. You can use it on your website or posts to create the post content structure.

If you are thinking now how this dynamic structure actually is, then see the preview given below.

Preview Of Automatic Table Structure

See this video preview to getting an idea of how this table structure program looks like.

Live Demo

Now you can see this program visually, also you can see it live by pressing the button given above. If you like this then get the source code of its.

You May Also Like:

Dynamic Table Of Contents Source Code

Before sharing source code, let’s talk about it. First I have created a nav using HTML <nav> tag for creating the dynamic table, and placed many headings and paragraphs to create the contents. Also, there I have placed some list items using <ul> & <li> tags. There I have not placed any ID or class name in the headings or any other items. Also, In the HTML file, I have linked other files like CSS and JS.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc to the elements. There gave a color for an active link, and the elements are creating by JS dynamically. There I have used flex display command to create a flexible layout.

JavaScript handling here the main feature in the program. First of all, I want to tell you, the JS codes are complicated if you don’t have good knowledge of JS then you can’t get this. There JS fetched all the headings using querySelectorAll command. Also, I have used JS if{} else{} statements multiple times.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating the program you have to create 3 files. First file for HTML, second for CSS, and third file for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given below.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully create Dynamic Table Of Contents With Active Link Highlight, Automatic Table generate program. If you have doubt or question comment down below.

Thank For Visiting, Keep Visiting.

5 COMMENTS

  1. Unfortunately anchor links in the html page are not appearing because the link color is getting changed. Can you please fix it.

LEAVE A REPLY

Please enter your comment!
Please enter your name here