Tabs in Blogger

So I wanted tabs on my Blogger pages as well as Show/Hide text so I experimented a little. On my own sites its relatively easy to adds tabs and Show/Hide text boxes because I can easily add a call to an external CSS and javascript file. However, on Blogger I can't easily add calls to external CSS and javascript files. (I'm sure there's a way through the template editor and such but I haven't bothered to figure it out.) I attempted to leave you the code for this but the blockquote wasn't quite good enough. Blogger/Firefox just kept interpreting it and showing the result instead of the code. So look at the source code for this page if you want to know how I did this.

Page 1

This is the content of tab 1

Page 2

This is the content of tab 2

Page 3

This is the content of tab 3

This all comes from csstutorial.net. I've simply figured out how to add the code directly to the Blogger post I am creating.

Show/Hide Text in Blogger with Javascript

I wanted to be able to hide some text by default when the page loads and then show it when a user clicks on the link to show it. Initially, I couldn't get this to work in Blogger (or so I thought). Turns out that it just doesn't work on the Preview page that Blogger provides from the editing window.

Anyways... If you are looking for code on this here it is (I add it at the end of a post):

<script language="javascript">
function toggle(togID, dispID) {
var ele = document.getElementById(togID);
var text = document.getElementById(dispID);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>

Originally this code came from here: http://bloggerstop.net/2009/01/how-to-showhide-text-using-javascript.html

However, the author suggested making a toggle1(), toggle2(), toggle3(), etc for each Show/Hide block you wanted. And the author warns that with enough of these blocks you will slow down the blog.

So the code I provide above is a slightly modified version of the code at the link I provided. Specifically, it requires that you now pass in the id values of the div you want to Show/Hide. To use the javascript above you need to do something like this:

<div dir="ltr" style="text-align: left;" trbidi="on"><a href="javascript:toggle('toggleText', 'displayText');" id="displayText">Show</a>
<br />
<div id="toggleText" style="display: none;">
This is Hidden Text #2</div>
</div>

Live Examples:

• Show

This is Hidden Text