For this method there are two steps, one is to add a code to the template <Head> </Head> region, so that you can use this anywhere [in posts, as well as widgets]
Then the second part of the code has to wherever you want to display 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>
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 !
Wow thanks! I was toggling the code for an hour and couldn’t use it twice :/
I stumbled upon this tutorial and found the last step helpful!
Thanks for this post. But as you say, this method requires an additional function in the template for each toggable textblock. I found that not very elegant, and indeed it slows down the blog considerably.
So I created a script with just one function that you can call as many times as you like from within the blog post. You can see it in action, and find the code for it, on my blog. It does require a bit more code in the post itself.
I'd appreciate any comments.
Thanks so much for this it just made my life easier. Is there any way when you click the Show/Hide text you can stop it from changing to hide or show? On the website I’m doing I’d like it show Read Bio (now I got it to do that no problem but after you click it, it changes to hide or show and i don’t want it change like that). Any help would be great thanks!