Simple Table of Contents (ToC) Using Pure HTML and CSS Code

For one of my web journals, I required a basic and clean Table of Contents (ToC) execution that utilizations immaculate HTML and CSS just (no modules or JavaScripts). I would then be able to physically include the ToC into any page where I need to indicate it. This strategy has the advantage of not loading any JS records on each page of the site. All the more significantly, I don’t need to keep up any JavaScript code for it. 

The greater part of the instructional exercises on this subject uses an answer that includes utilizing JavaScript or a Plugin. In this instructional exercise I will clarify how I made a straightforward chapter by chapter list that resemble the accompanying screenshot utilizing just HTML and CSS. You ought to have the capacity to duplicate and glue the majority of the code. In any case, you do need to comprehend CSS and HTML code a little to use this. 

The CSS Code for the ToC 

Include the accompanying CSS code in your topic’s template record. On the other hand, you can infuse this CSS code utilizing a custom CSS module like this one. 

#toc_container { 

foundation: #f9f9f9 none rehash scroll 0; 

fringe: 1px strong #aaa; 


show: table; 

text dimension: 95%; 

edge base: 1em; 

cushioning: 20px; 

width: auto; 



.toc_title { 

text style weight: 700; 

content adjust: focus; 



#toc_container li, #toc_container ul, #toc_container ul li{ 

list-style: outside none !imperative; 



The HTML Code for the ToC 

Since the CSS code is set up, you can utilize straightforward HTML code like the accompanying case to make a ToC in any page. 

You are fundamentally making a rundown of connections 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> 

Presently, allocate the “id” parameter in your going to interface the connections from the above rundown. The accompanying case indicates how you can relegate an “id” to any heading labels in your page. 

<h2 id=”First_Point_Header”>First Point Header</h2> 

That ought to do it.