For one of my blogs, I needed a simple and clean Table of Contents (ToC) implementation that uses pure HTML and CSS only (no plugins or JavaScripts). I can then manually add the ToC into any page where I want to show it. This method has the benefit of not having to load any JS files on every page of the site. More importantly, I don’t have to maintain any JavaScript code for it.
Most of the tutorials on this topic uses a solution that involves using JavaScript or a Plugin. In this tutorial I will explain how I created a simple table of contents that look like the following screenshot using only HTML and CSS. You should be able to copy and paste most of the code. However, you do have to understand CSS and HTML code a little to utilize this.
The CSS Code for the ToC
Add the following CSS code in your theme’s stylesheet file. Alternatively, you can inject this CSS code using a custom CSS plugin like this one.
#toc_container {
background: #f9f9f9 none repeat scroll 0 0;
border: 1px solid #aaa;
display: table;
font-size: 95%;
margin-bottom: 1em;
padding: 20px;
width: auto;
}
.toc_title {
font-weight: 700;
text-align: center;
}
#toc_container li, #toc_container ul, #toc_container ul li{
list-style: outside none none !important;
}
The HTML Code for the ToC
Now that the CSS code is in place, you can use simple HTML code like the following example to create a ToC in any page.
You are basically making a list of links that are in the page.
<div id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
<li><a href="#First_Point_Header">1 First Point Header</a>
<ul>
<li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
<li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
</ul>
</li>
<li><a href="#Second_Point_Header">2 Second Point Header</a></li>
<li><a href="#Third_Point_Header">3 Third Point Header</a></li>
</ul>
</div>
Now, assign the “id” parameter in your heading tags to connect the links from the above list. The following example shows how you can assign an “id” to any heading tags in your page.
<h2 id="First_Point_Header">First Point Header</h2>
That should do it.
@Lillian, You can try the following CSS tweak. It should put some extra padding for the list items.
#toc_container li {
padding: 5px 10px !important;
}
I am running into an issue with a floating header, how would I edit this in CSS so that the anchors have a little padding when linked?
@Nima, Below is an example CSS tweak that will make the color of the links red:
#toc_container a {
color: red;
}
Hello,
does anyone know how to change the color of the links? I use .toc_list but the color doesn’t change. It uses the same colour as my post links. They are bright red so I am trying to change them for the TOC only. Please help. I’m using WordPress.
Nice! Easy and a simple code to get a proper Table Of Content. It’s output is though similar to TOC+ Plugin
Hi! You can use only parent selector (#toc_container ul) in your css for list-style. It’s inherited property. https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#Specifications
Easy and clean code for simple yet meaningful table of content.
It would be more helpful if you make a WordPress plugin for the same.
@Pooja, It uses standard CSS and HTML code so it should work there also.
Thank you so much for the code!
Can we use the same for blogger blog?