Great Html Tab Panel Using CSS and Javascript

I needed a tab pane to put some content in my web pages. There are many solutions around
and I must say that they are quite good, but I had some extra requirements that I needed.
I did search around but I did not find what I wanted, so I ended up producing something and now I am sharing
it with you. The idea is not just to share the code but also explain
the issues involved.
The Tabbed Pane Content should be all downloaded with the page
This is quite a Web 2.0 thing, and I must say it was not an absolute requirement, but since I am at it
I may as well do it in a good way.
The requirement is that the content of the panels should be downloaded with the page that defines the panels
and therefore when the user switches panels there will not be any delay, the content is already there
.
The tab Panel should coexist with other content
Quite a few of the tabbed panels around basically take over the content. This simply means that
you design the page around the tabbed pane and it is quite difficult to put extra content in it.
I wanted a tab panel that fits inside some content I have
and not one that takes over my page.
Note that this means avoiding as much as possible fixed width and height
and using as much as possible
all the available screen size. Not easy...
The issues that have been solved
Before giving you the solution I will describe the issues involved, so you can understand better
what the code does and change it to suit your needs.
Where to store the different content
I could have stored the content in a Javascript variable and then push
it into
the current DIV (this may be something I do in the future) but as it is now I am inserting the
content of the different panels into different DIV, each one having a separate ID. This surely makes writing the
actual content of the panel easy.
How to overlap the various DIV
This is kind of simple, the way to overlap content is by means of using a DIV set to relative positioning
and then putt