Show and hide content using CSS

Hi,

I want to swop some content in a page out without the page re-loading, basically I have 3 'tabs' each with a little text content associated with them, I would like to show tab 1's content and when clicked for it to be replaced with tab 2 or 3's content. I would imagine it's possible using show/hide with javascript and css.

I have found some simlar things around but none that 'replace' the entire content area.

Thanks,

It can be done with CSS alone, however if you want it to be "Sticky" you would need js to accomplish this. The nice thing is when its done with CSS and you append js to it it will function with or without javascript enabled.

I have a menu example here I built which uses just css and you can also use something like jQuery to very easily add the js functionality. Hope this helps.

__________________

you could use the

Code: Select all

display: block;

and

Code: Select all

display: none;

style tags for the div columns you want to show and hide, have each "tab" as a separate div?

Its a lot more effective if it is done using unordered lists and nested unordered lists for the show/hide as you need to have an item that can easily and direcetly activate display/hide of the required elements. th eonly reason I recommened jQuery is that with it he can add animation effects and easily handle the show/hide and make it sticky. CSS while it is possible the :active psuedo class only gets you so far and it is a tad more complex of an implementation.

The example i provided shows this and can be easily dissected and used for a base. Salbert if you need any other help just let us know.

Simplest example would be:

Code: Select all

#foo ul li ul {display:none;}
#foo ul li:hover ul {display:block; position:absolute; width:200px;}

__________________

sorry, I was writing mine out while you posted your first reply moojoo, didn't see it till after I'd posted! yours is the better option!

Your response was not incorrect, just thought it was a bit vague for what he was looking for.

__________________

Just another solution - if you want something out-of-the-box and degrades nicely, I've used 'Tabber' in the past which is dead easy to use