Jquery Toggle content using Horizontal Menu Bar

Hey guys,

I’ve been trying to build my website so that the user first starts at the home page. Whenever the user clicks on the horizontal menu/navigation bar, the new content would push the home page content down. Clicking on another menu/navigation item would also push everything down and display the new content above it. I’ve been researching and figured i’d have to use jquery toggle. I’ve looked at multiple guides, and the one at

http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/

is like what i’m trying to do. However, I can’t figure out how to toggle from a horizontal navigation/menu bar instead of using HEADERS like in the example link. I don’t want to toggle content with the clickable toggle button stacked vertically. (Example: Toggle button –> Content —>Toggle Button----> Content)

Any ideas? Thanks in advance!

That shouldn’t be too difficult but need to clarify a couple of things.

Let’s say the menu bar has items for page1 (home page), page2, page3, page4, page5.

On page load, page1 is displayed. If the user then clicks page3 in the menu bar then the user sees in their browser window -

page3
page1

and if the user then clicks page5 in the menu bar, they then see in their browser -

page5,
page3,
page1.

So now, if the user clicks page3 again in the menu bar what is the order of pages you want the user to see in their browser? …ie…Do you want pages 3 and 5 to reverse their order or do you want page3 to go to the top of the stack and page5 to go to the bottom of the stack?

That’s a good point. Never thought about that. I think i’d like it to be so that page 1 (home page) is always pushed down when another page is clicked. However, changing from page 3 to page 5, I would like to clear page 3 then load page 5. (if that makes sense)

ok, so that means that there will only ever be only 2 pages at the most displayed at a time.

Then in that case when you have say

page5
page1

displayed and the user clicks page1 again on the menu bar, do you want pages 1 and 5 to reverse their order or to make page5 disappear from the display?

It would help if you post a complete set of specifications of what you want to happen and when otherwise any advice you get will have assumptions built into it which may or may not be correct for what you eventually want.

Oh sorry. Been thinking about this for like 4 hours straight how to solve it, not thinking quite logically now haha. First time doing this T.T So when the user clicks on page 1 again on the menubar, I want page 5 to disappear, and only display the main page.

Thanks for helping me!