HTML tabs with no round trip to server

[suityou01]

I'm looking for some code to do html tabs. Easy enough to do with CSS, but I don't want a round trip with every tab click. Rather I would like the tabs to display the relevant content without doing a round trip, possibly with some client side java script to say, hide a panel and display the next panel.

Anyone got any linkys. Googled but got nuttin.

[Ardesco]

http://jquery.com

just need some basic css and use a bit of jQuery to hide/display the tab. numpty stuff tbh, what was your specialism again...

[HairyArsedBloke]

Like this?

[suityou01]

http://jquery.com

just need some basic css and use a bit of jQuery to hide/display the tab. numpty stuff tbh, what was your specialism again...

Not jquery.

Thanks for your help. This is one thing about IT that urks me though.

I can have worked in the industry for 13 years as a programmer, have countless years experience in loads of different technologies, databases, CMS, DMS, object oriented languages, yada yada yada and just because I don't know jQuery I'm suddently a numpty.

Can't wait for my plan B to take off.

[Zippy]

If you include the Javascript and CSS files as links they will be cached by the client so no round trip necessary.

Have I missed the point here?

[suityou01]

If you include the Javascript and CSS files as links they will be cached by the client so no round trip necessary.

Have I missed the point here?

Yes.

The CSS tab tutorials I found styled a <ul> and each <li> was <a>ed, each href then displayed a different page, with the respective clicked "tab" shown in a different colour.

This means round trips to the server.

I am using some jscript to show and hide divs at the moment. Seems to work in FF so should be good in IE.

[Zippy]

So you need to load all the info in one hit and then just hide/show (and change your tabs)?

[suityou01]

So you need to load all the info in one hit and then just hide/show (and change your tabs)?

Yip.

[Ardesco]

I'm not saying your a numpty because you don't know jQuery, i'm saying it numpty stuff i.e. not particularly difficult.

To do 4 tabs all you need to do is have 4 specific areas of the site and use css to hide and display them when an href is clicked.

Something like:

<ul>
<li><a href="one"></li>
<li><a href="two"></li>
<li><a href="three"></li>
<li><a href="four"></li>
</ul>
<div id="one"> Tab one content here</div>
<div id="two"> Tab two content here</div>
<div id="three"> Tab three content here</div>
<div id="four"> Tab four content here</div>

then default div id's two three and four to display: none.

Then a snippet of javascript (or jQuery because you will be able to do in in one line after spending about 5 mins on the jquery site) that will set one of the divs to display: block and all the other divs to display: none when you click on the links in the <ul>

Really not that hard conceptually. If you don't like the idea of display none you can set an absolute position of -9999em or something.

[Zippy]

Yip.

OK. Show and hide divs is good. You can change styles for the tabs using Jscript (but FF and IE are different)
I'll confess that I don't know what the big problem is here. Sorry