Hide-Show div switch?

JavaScript
1

Hi,
I am js newbie and I have found a script that does what I am wanting it to do with the exception of one thing. I would like to have each div close the current div and take it’s place as it is opened, just like turning pages.

I have a series of divs (#one,#two,#three) that are collapsed when the page loads with the exception of one div (#home) which will be current div.


[COLOR=Black]function pageLoad() {
collapseAll($('one','two','three'));[/COLOR]
}

I have set up a nav menu for the onclick anchors that will open the hidden divs. As each link in the main menu is clicked it should switch places with the current div in view. When “Div One” is clicked from the menu it should close the current div “Home” and take it’s place and so on down the line.

Here is my live test page

My plan is to have it degrade to standard jump links if js is turned off, it seems to do that just fine.

I did not write the js, it was a copy and paste from this tutorial.
http://www.dustindiaz.com/dhtml-expand-and-collapse-div-menu/

If any of you JS gurus could help me get the divs to switch out with one another I would really appreciate it. I’m open to any ideas also if you see a better way of doing it. I just wanted a small stand alone script to take care of the div hiding and switching.

CSS is my area of experience so pardon me if I don’t understand all the js terminology.
Thanks in advance :slight_smile:

2

You are wanting tabbed navigation, a standard technique nowdays.

For example, there is the JavaScript Tabifier and [url=“http://docs.jquery.com/UI/Tabs”]jQuery tabs, [url=
“http://www.brainjar.com/css/tabs/”]tabs tutorials as well as 25 tab techniques to choose from.

3

Thanks for the links Paul, that’s what I was looking for.
It seems I was missing “Tabs” from my search words. :blush: