SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    Hide-Show div switch ?

    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.
    Code:
    function pageLoad() {
    collapseAll($('one','two','three'));
    }
    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-expa...apse-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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You are wanting tabbed navigation, a standard technique nowdays.

    For example, there is the JavaScript Tabifier and jQuery tabs, tabs tutorials as well as 25 tab techniques to choose from.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the links Paul, that's what I was looking for.
    It seems I was missing "Tabs" from my search words.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •