Web articles and reports can be made easier to navigate with a table of contents. They can be tedious to create and maintain, so let Javascript take the strain.
Web Articles or Reports
Do you write articles for the web, or publish reports there? Then you should enhance them with a stylish table of contents so that your reader can find their way around.
And the good things is that you don’t need to do much apart from include some Javascript and CSS in your page along with a single
How it works
All of the sections in your article need to be given a header — you doubtless already do this — and the script that I am going to show you will scan those headers, create anchors in the HTML and build the table in a panel at the top of the page.
First we need to settle on a header that we are going to use for our section headings. Let’s say <h3>. Then we need to insert three things into our file: a <div> tag that looks like this:
<div id=”ToC”></div>
You can put this anywhere, but immediately after the title is a good place.
Then you need to insert references to a CSS stylesheet and a Javascript file. The CSS link looks like this:
<link rel=”stylesheet” href=”toc.css”>
Put this anywhere in the header of your HTML file.
The Javascript looks like this:
<script src=”toc.js”></script>
And you need to insert this just before the </body> tag.
Then you need to put the the two files that you have just referred to in the same directory as your HTML file.
#table-of-contents #javascript #css #programming #web
