Complete Guide to Using the Table of Content

In this template, there are 3 options for displaying the ‘Table of Content’, namely: manual, semi-automatic, automatic for each post. Each method has its own advantages and disadvantages. You can use whichever you want as you wish.

This included fixing a bug where headings were covered by headers when the table of content was clicked

The order of the heading tags

First, make sure that the heading tags you write are in order, that is, you must be able to distinguish which headings and which are sub headings in the article. Writing the right headings is like the one below

<h2>Subheading artikel</h2>  <h3>Sub subheading artikel</h3>     <h4>Mini subheading artikel</h4>      <h5>...</h5>        <h6>...</h6>

Make sure the heading tags you write are sequential as above, because this Auto Toc is nested and takes the level data from the heading tags you write. Examples of writing incorrectly:

<h2>Subheading artikel</h2><h4>Mini subheading artikel</h4>

Also avoid using tags

because this tag has been used in the article title. It is strongly discouraged to add two or more tags

on one page.

Add Table of content manually

Manually means that you write and add id = ‘…’ In the heading tags one by one, it looks like a hassle but in this way you can choose to add or skip several heading tags in the ‘Table of content’, all the control is yours. The manual version of the ToC code looks like this:

<div class="tableOfContent">  <input class="toctableOfContent-01' type="checkbox">  <label class="tocHeader" for="button">Judul_toc_disini</label>  <div class="tocContent">    <ol>      <li><a href="https://fletro.jagodesain.com/2020/11/#toc-1">Bagian heading satu</a></li>      <li><a href="https://fletro.jagodesain.com/2020/11/#toc-2">Bagian heading dua</a>        <ol>          <li><a href="https://fletro.jagodesain.com/2020/11/#toc-2a">Bagian subheading satu</a></li>          <li><a href="https://fletro.jagodesain.com/2020/11/#toc-2b">Bagian subheading dua</a></li>          <li><a href="https://fletro.jagodesain.com/2020/11/#toc-2c">Bagian subheading tiga</a></li>        </ol>      </li>      <li><a href="https://fletro.jagodesain.com/2020/11/#toc-3">Bagian heading tiga</a></li>      <li><a href="https://fletro.jagodesain.com/2020/11/#toc-4">Bagian heading empat</a></li>      <li><a href="https://fletro.jagodesain.com/2020/11/#toc-5">Bagian heading lima</a></li>    </ol>  </div></div>

Add it id = ‘toc-1’ in each heading or tag

,

,

on your article. Example:

<h4>Tutorial Membuat Table of Content</h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.// Tambahkan id pada heading menjadi seperti dibawah :<h4 id='toc-1'>Tutorial Membuat Table of Content</h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.// Tambahkan 'checked' pada tag input untuk menyembunyikan daftar isi, lihat contoh dibawah:<input class="tocInput hidden" id='tableOfContent-01' type="checkbox" checked>

Semi-automatic table of content

This second method is easier and is the best recommendation from us. The most striking difference is that you don’t have to write it down id = ‘…’ in the heading of your post, the script will automatically add it for you. Another advantage is that you can also put the Table of content anywhere you want in the post, it can be in the middle, at the beginning of the article or in certain paragraphs.

This is the code to display the Table of Content on your post, place the code below anywhere you want in the post.

<div class="tableOfContent">  <input class="tocInput hidden" id='tableOfContent-01' type="checkbox">  <label class="tocHeader" for="button">Table of Content</label>  <div class="tocContent" id='tocContent'></div></div>

Don’t forget to also add the script code below at the end of your article so that the table of content is active

<script>fletroTOC();</script>

For a live preview you can see in this post.

Automatic table of content

In this last method, you don’t need to write additional code in the post, because the table of content will automatically appear in the sidebar. On the display of the mobile table of content will be displayed floating beside the button to display it is on the bottom right of the screen.

To use this method, please find the code below and delete the comment tag as in the example

<b:if cond='data:view.isPost'>  </b:if>// Ubah menjadi seperti dibawah ini:<b:if cond='data:view.isPost'>  <div class="section sidebar-toc">    <b:include name="post-articleToc"/>    <script>fletroTOC();</script>  </div></b:if>

Hide automatic table of content in certain posts

Please note that using an automatic method will display the table of content in every post without exception, the only way to hide it is by adding CSS code to posts that do not want the Table of content to be displayed. Here’s the CSS code that you need to add:

<style>.sidebar-toc{display: none}</style>

This method does not completely remove the Table of content in the article, the function of the CSS code above is only to hide the Table of content.