Guidelines for Using Automatic Table of Content and How to Hide It

Source: blogging270.blogspot.com

If in the initial (manual) version of the table of contents you can choose to put it anywhere, but in this automatic version the script is permanently installed, which means that to change it you have to edit the HTML code of the template. The easiest way you can do to hide it is to add display: none; at the className ToC at the end of each post. Read this article to the end to make it easier to understand.

Before that, there were rules in writing articles that you had to know so that the Toc would function the same as in the demo.

The correct order of 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 a proper heading is like the one below

<h2>Subheading article</h2>
  <h3>Sub subheading article</h3>
     <h4>Mini subheading article</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 article</h2>
<!-- Contents paragraph article here -->

<h4>Mini subheading artikel</h4>
<!-- Fill in the article paragraph here -->

Also avoid using the <h1> tag because this tag has been used in the article title. It is highly recommended not to add two or more <h1> tags in one page.

How to hide table of contents

Maybe there are some who don't like this Toc concept, so we provide several options for hiding this feature.

Hide the ToC on static pages

This automatic ToC is set so that it only appears on singleItem pages (post and static pages). If you want to display it only on post pages then please find and change the code below:

1. Find and change the cond = '' attribute in the tag below:
<!-- Table of Contents -->
<b:include cond='data:view.isSingleItem and !data:view.isPreview' data='post' name='post-artikelTOC'/>

// Change to
<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-artikelTOC'/>

2. Find and modify the code below
<script>medianTOC();</script>

// Change to
<b:if cond='data:view.isPost'><script>medianTOC();</script></b:if>

Hide Toc only in certain posts

Because it is permanent, in this option you don't actually disable ToC, the script will still be there in the post. All it does is add display: none to the ToC selector so that the display will be hidden.

// Add this code at the end of the post where you want to hide the ToC.

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

Hides the ToC when the page loads and displays it when the ToC button is clicked

This option is the opposite of the current ToC function. By default the ToC will appear immediately when the page loads and covers the sidebar, the user must click the ToC title first so that the Widget in the sidebar can appear.

To reverse the function you have to change some of the code below:

1. Search and exchange CSS contents in the code below:
.Blog .post-tocContent{-webkit-transition:all .3s ease;transition:all .3s ease;max-height:0;overflow:hidden}
.Blog .toc-menu:checked + .post-toc .post-tocContent{max-height:1000vh}

Change it to be like this:
.Blog .post-tocContent{-webkit-transition:all .3s ease;transition:all .3s ease;max-height:1000vh;overflow:hidden}
.Blog .toc-menu:checked + .post-toc .post-tocContent{max-height:0}

info: The code above is located separately, its function is to change the ToC settings on the mobile display

2. Add the checked = 'checked' attribute to the <input> tag below::
<input class='toc-menu hidden' id='offtoc-menu' type='checkbox'/>

// Becomes
< input class = ' toc-menu hidden ' id = ' offtoc-menu ' type = ' checkbox ' checked = 'checked' />

You can see an example of its application in this post.

Permanently disable table of contents

To disable it permanently, find and delete the two codes below:

<b:include cond='data:view.isSingleItem and !data:view.isPreview' data='post' name='post-artikelTOC'/>

<script>medianTOC();</script>

Blogging270