Then the second part of the code has to added in the body region (wherever you want to hide text/images in this way).
First Step:
Log in to Blogger, go to "Layout", click on "Edit HTML" tab.
Now find for this code: </Head>
Then immediately BEFORE this code, paste this:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Second Step:
Now wherever you want to show this type of text, add code like this:
<a href="javascript:toggle();" id="displayText">Show/Hide</a>
<div id="toggleText" style="display: none;">This is Hidden Text</div>
*UPDATE:
As requested by jhevie, here's the method to add this hack two times in your blog !
Once you have done the process described above, do this:
Third Step:
Log in to Blogger, go to "Layout", click on "Edit HTML" tab.
Now find for this code: </Head>
Then immediately BEFORE this code, paste this:
<script language="javascript">
function toggle2() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
Fourth Step:
Now wherever you want to show this type of text, add code like this:
<a href="javascript:toggle2();" id="displayText">Show/Hide</a>
<div id="toggleText" style="display: none;">This is Hidden Text</div>
Similarly you can add any number of times, by changing the code in red to toggle3(), toggle4() etc.
But if you add it many times, then it may slow down your blog !