Learn To Make This
I have seen nearly 30 different ways to do this for blogger.com blogs but this method is by far the easiest!
First!!! BACKUP YOUR BLOG!
2. Go to "Customize"
3. Now click on "Layout", Then "Edit HTML"
4. How copy and paste the following code just above the "</head>" code, and just below the "]]/:skin>" code.
<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>
Before:
After: (This picture is missing some code and will be updated soon)
5. Now paste the following code where ever you need.
<a id="displayText" href="javascript:toggle();" id="displayText">Show/Hide</a>
<div id="toggleText" style="display: none;">Hidden Text or Object Goes Here</div>
The above code can be placed anywhere whether it be within a blog post or in a widget or even in the template to show/hide entire columns. The text "Hidden Text or Object Goes Here" can be replaced with any amount of text or even entire widget or entire embedded websites.
If you want to add multiple Show/Hide links to your blog to either Show or Hide two or more completly different things then all you need to do is repeat steps 4 and 5 but add a number after the code "toggle" for BOTH steps 4 and 5.
Before:
function toggle() {
------
< href="javascript:toggle();" id="displayText">Show/Hide</a>
After:
function toggle2() {
-------
< href="javascript:toggle2();" id="displayText">Show/Hide</a>
thanx for your helpful information i just have this tiny problem:
ReplyDeletei wanted to use this feature twice so all i did was to follow ur way by adding a second code same as the first beneath the first one with the only difference of toggle2.
i did same for the second widget i wanted , but the second time it didnt work.
more specifically when i clicked on the "show/hide" link i had added as second , it always redirected me to the first one ...i checked any html that could be wrong and even did all changes from the begin but same thing happened for the second widget i perfomed changes to..sth am doing wrong but what?