Create Fixed or Floating Table of Contents to Posts or Pages with Show & Hide Button in WordPress or BlogSpot Without Plugin






table of contents wordpress without plugin


On this topic, you will learn how to add a floating or fixed Table of Contents (ToC) to your web-based topics, pages or posts in your WordPress, Blog Spot or any website or blog with Show and Hide button easily.





We have previously posted a topic to show you how to manually add a simple Table of Contents to your posts without need to add a plugin, CSS, JavaScript and without need for websites or tools with html table of contents generator. Just add the code to HTML editor of topic or page and connect or assign the ToC’s header to the related sections inside the topic then save the topic.

This topic will only discus the method to change that simple Table of Contents from inside the topic in a way to make it floating in a fixed position at right or left sidebar of your website which give users or visitors an easy and quick way to navigate your topic flawlessly as the table of contents will be floated aside at ride or left side inside the topic.

There is a video to show you all steps of adding floating Table of Contents was captured while I added the ToC to one of my topics in blogger BlogSpot, however, the method will be applicable to WordPress, Wix, Tumblr, Medium, Squarespace, Joomla, Ghost, Weebly or any another platform or website, as this method not require to add any plugin to website or blog.





Related topics:






FIRST:

YOU SHOULD read this topic to see how to add a simple clickable Table of Contents (ToC) inside the topic or web page with all steps to connect or link the ToC contents to their corresponding section or paragraph inside that topic or page.







SECOND:

How to change the simple Table of Contents from in-article to floating with Show and hide button?





1. Open HTML editor of topic or post that you want to change its simple ToC to floating, then add the following code just below the title of Table of Contents inside the previously added Table of Contents code:

<a onclick="toggle_visibility('toc');"><button class="Show">Show</button>
<button class="Hide">Hide</button></a> <div id="toc">



2. Add this closure tag </div> to just below the whole previously added code of Table of Contents: then click Update to update your topic.





The whole code of your table of contents should look like the following:

<div id="toc_container">
<div class="toc_title">
Table of Contents:
<a onclick="toggle_visibility('toc');"><button class="Show">Show</button>
<button class="Hide">Hide</button></a> <div id="toc">
<ul class="toc_list">
<li><a href="#First_Point_Header">1. #####</a><ul>
<li><a href="#First_Sub_Point_a">1.a. #####</a></li>
<li><a href="#First_Sub_Point_b">1.b. #####</a></li>
</ul> </li>
<li><a href="#Second_Point_Header">2. #####</a></li>
<li><a href="#Third_Point_Header">3. #####</a></li>
<li><a href="#Fourth_Point_Header">4. #####</a></li>
</ul>
</div>
</div>
</div>

You should replace the ##### by your own words or header as these words will be shown in your table of contents.







3. Open the HTML editor of the theme or template.

4. Click inside the text-box and press on Ctrl + F keys from keyboard to open Search box..

5.  Search for the skin code by typing </b:skin> inside the search box then press Enter.



add the following CSS code in any place inside the skin code between <b:skin>    AND    </b:skin>  (the best place is to paste it just before < /b:skin> closing tag:
#toc_container {
    background: #ecebeb none repeat scroll 0 0;
    border: 1px solid #aaa; font-size: 80%; 
    position: fixed; left: 0;  top: 320px; padding: 5px 5px;
    width: auto;
}
.toc_title {
 font-weight: 1000; font-size: 105%; 
 }
#toc {
display:none;
}
.Hide {
  display:none;
}
.toc_list {
    font-weight: 500; padding-top: 2px; padding-right: 5px;
    padding-bottom: 2px; padding-left: 2px; width: 170px;
}







6. Add the JavaScript code to the Body code inside the HTML code of your blog theme (I.e. you have to add the code between <body> AND  </body> tags), however, the safest way is to paste it just before </body> closing tag.

So search again for </body> tag inside HTML editor and paste the following JavaScript code just before it:


<script type='text/javascript'>
<!--
    function toggle_visibility(toc) {
       var f = document.getElementById(toc);
       if(f.style.display == 'block')
        f.style.display = 'none';
       else
          f.style.display = 'block';
$('.Hide').click(function() {
    $('#target').hide(500);
    $('.Show').show(0);
    $('.Hide').hide(0);
});
   $('.Show').click(function() {
    $('#target').show(500);
    $('.Show').hide(0);
    $('.Hide').show(0);
});
$('.toggle').click(function() {
    $('#target').toggle('slow');
});
    }
//-->
</script>


Note: You may need to delete lines with red color if you are unable to save your theme after adding previous JavaScript code.




7. Click on Save Theme button to save your changes

And click again on Save theme to make sure it’s already saved



10. Open or reload the page that you need to add the floating Table of Contents to see The floating table of Contents and to then test the links if working or not.



You are done

To customize and format this ToC. read this topic.


To see the topic that we used during this tutorial, click here to open it.




Finally, you should watch the following video to see how to add a floating Table of Contents to your topic or posts in blogger or WordPress blog:







Share on Google Plus
    Blogger Comment
    Facebook Comment

1 comments: