How to Add a Clickable Table of Contents to Posts/Topics on Web Page Without Plugin or Script

How to Add a Clickable Table of Contents to Posts/Topics on Web Page Without Plugin or Script

If you need to learn the easiest way in making a nice table of contents for your topics or pages on website (blogger or WordPress or whatever), we will guide you through this topic for the best method to do that.

You are not required to be a coding expert in a way to add a table of contents to your posts or web page.
Since there is no need to add any java script or similar codes,  this method won't has negative effect on the loading speed of Web page in compare to other methods.

Table of contents may replaced by another name like Contents, Quick links, On this topic, ... etc.

I will use blogger on this lecture; However, the method will work on any web page  such as on WordPress or any hosting platforms.

Read this topic to know the types of Table of Contents and what is the importance of adding Table of Contents to posts:

1- Edit an older topic or create a new one. 

2- Determine the area for the ToC inside the topic.

3- Open the HTML editor of topic.
4- Copy and paste the following code into the area on the HTML editor where you intended to put the table of contents:

<div id="toc_container">
<p class="toc_title"> Table of Contents</p>
<ul class="toc_list">
  <li><a href="#First_Point_Header">1. First Point Header</a>
      <li><a href="#First_Sub_Point_a">1.a First Sub Point 1</a></li>
      <li><a href="#First_Sub_Point_b">1.b First Sub Point 2</a></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>
  <li><a href="#Fourth_Point_Header">4. Fourth Point Header</a></li>

Underlined lines represent the sub-topic headers (you can duplicate one line, delete one or both lines, copy or cut and paste it between </a> </li> of second or third point header to which you need to show sub-topic or sub-points with).

5- Copy and paste the header of sections from your topic to replace all strings with Red color on previous code one by one:

6- From HTML editor, assign the “id” parameter in your heading tags to connect the links from the previous list.

(For example, If Question Number 1 is your first header, so paste this: <h2 id="First_Point_Header"> before Question Number 1, and paste this </h2> after Question Number 1 to became as following:

<h2 id="First_Point_Header">Question Number 1</h2>

 These are the forms of assigned id's:

<h2 id="First_Point_Header">1. First Point Header</h2>

       <h2 id="First_Sub_Point_a">1.a First Sub Point</h2>

       <h2 id="First_Sub_Point_b">1.b First Sub Point</h2>

<h2 id="Second_Point_Header">2. Second Point Header</h2>

<h2 id="Third_Point_Header">Third Point Header</h2>

<h2 id="Fourth_Point_Header">Fourth Point Header</h2>
 ... and so on.

Press Ctrl+F keys from keyboard to search for headers inside the HTML editor.

7- You can open Microsoft Word app, draw a new table, format the table, resize the table to fit the size of your ToC, paste it to your topic and copy the Text of ToC to inside the table.

8- In blogger, if you have edit the topic from Compose option, the links from ToC will not work, because the auto generated links that formed inside the code that you paste using HTML editor. 
So, back to HTML editor and delete the generated links inside the code then save the topic while you are on the HTML editor.

9- Reload the page to see if all links are working or not (you have to test all links one by one).

You should delete the generated links after each topic editing through Compose option (as on the step number 8), otherwise, the on-topic links will not work properly, instead, it will link to the dashboard or control panel of blogger, WordPress or any blogging platform.

On next lessons, I will show you how to make this table of contents floated and fixed to the sidebar and how to add Show and Hide property to the table of contents.

You should watch this video to see all steps of adding Table of Contents to your topics:

If you have any question about any step, don't hesitate to put it on the comments below. 

Share on Google Plus
    Blogger Comment
    Facebook Comment


  1. Thanks for your help it is really helpful article

  2. This comment has been removed by the author.

  3. Sir, Is any issue with infolink advertisement. Please reply on

    1. There is no any issue with infolink as there is no adsense "if that's your concern" account linked to this website.

  4. everything is amazing, thank you.
    but I have a little problem: this sign (>) appears in the table (appears exactly between the name and the number).

    note: I post in Arabic language, so I had to reverse the table from left to right. do you think this is the reason behind the appearing of this sign?

    thank you.

    1. اعتذر عن التأخر في الرد اخي محمد
      لكن قد يكون ذلك هو السبب او قد تكون هناك مشكلة اخرى
      لذا يمكنك لصق الكود الخاص بك هنا ونحن سنقوم بمساعدتك ان شاء الله.