Add [hide] and [show] Option Beside Table Of Contents Title

I’ve used the following codes to make a Table of Contents in my Wp blog post.

Added this CSS Code to Additional CSS file:

#toc_container {
background: #f9f9f9 none repeat scroll 0 0;
border: 1px solid #aaa;
display: table;
font-size: 95%;
margin-bottom: 1em;
padding: 20px;
width: auto;}

.toc_title {
font-weight: 700;
text-align: center;}

#toc_container li, #toc_container ul, #toc_container ul li{
list-style: outside none none !important;}

#showTOC { display:none; }

and the HTML Code that I’ve used for it is:

<div id=”toc_container”>
<p class=”toc_title”>Contents[<a href=’javascript:void’ id=”hideTOC” onclick=’hideTOC()’>hide</a><a href=’javascript:void’ id=’showTOC’ onclick=’showTOC()’>show</a>]</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>

Somewhere I found this code and tried this code in the Head of the entire WordPress site,

<script>
var hideTOC = function(){
var hideThese = document.getElementsByClassName(“.tocHidable”);
for (var i in hideThese){
hideThese[i].style.display = “none”;
}
document.getElementById(“showTOC”).style.display = “”;
}
var showTOC = function(){
var showThese = document.getElementsByClassName(“.tocHidable”);
for (var i in showThese){
showThese[i].style.display = “”;
}
document.getElementById(“showTOC”).style.display = “none”;
}
</script>

But seems, all effort went in vain. Please somebody help me to add a [hide] and [show] option beside the Contents (title) just like they do in Wikipedia Table of Contents? Replies appreciated.

Read more here:: Add [hide] and [show] Option Beside Table Of Contents Title

Leave a Reply

Your email address will not be published. Required fields are marked *