move div with sliding effect on click? jQuery

Question

I've made a quick test using CSS3, to create a sliding tabs sort of idea. That can be seen here:

LINK

It's pretty hacked together cause I don't know how to do it properly. (The z-index of the tab you hover over changes so that the other tabs can be seen)

The thing is I'd like to do this in a way that can work in all browsers, and with that effect. Is that possible? Thanks for your time!

HTML can be viewed on the page, CSS can be viewed here.

Answer 1

For it to work in ALL browsers is a lot to ask, but to get the effect working in most major desktop browsers with jQuery would go something like this:

Demo: jsfiddle.net/Marcel/CKt58 (fullscreen)

And with clickable tabs to close panel:

Demo: jsfiddle.net/Marcel/CKt58/1 (fullscreen)