move div with sliding effect on click? jQuery

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开发者_StackOverflow possible? Thanks for your time!

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

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)

From a usability point of view I would recommend making all 4 tabs move to the right when that slides out. That will make it easier to switch between tabs. Also, that would be really easy to code and you won't have to fiddle with z-indexes at all.

use jquery's animate() function, manipulate the left prop., it will work cross-browser, like this:

http://jsfiddle.net/jackJoe/u4sCp/embedded/result/

here's the fiddle: http://jsfiddle.net/jackJoe/u4sCp/

now, this needs some more work, swapping the tabs + calculate the width (left) I don't know if your intending to slide it to the full width of the screen, etc...