SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    chicago
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Revealing / Hiding Divs

    Hi,

    I need to implement a pretty basic javascript functionality in my site, but have never used it and wonder if there is a script available or if someone can give me the basics.
    I have a nav bar at the top of the page with four links, and then divs for each of the links. The link you click on displays the associated div and hides the rest of them. Pretty simple, right?

    Andrew

  2. #2
    SitePoint Wizard HarryR's Avatar
    Join Date
    Dec 2004
    Location
    London, UK
    Posts
    1,376
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    This can be done fairly easily by changing the 'display' css property to 'none' and then back again to whatever it was before (e.g. 'block').

    Here's a bit of code off the top of my head incase you're interested:

    Code:
     var g_displayed = true;
    
     function toggleDisplay ()
     {
       var l_item = document.getElementById ('menuthingie');
    
       if ( l_item == null )
       {
          alert ('Sorry.. couldnt find lil Miss MenuThingie!);
          return;
       }
    
       if ( g_displayed == true )
       {
          l_item.style.display = 'none';
          g_displayed = false;
       } else
       {
          l_item.style.display = 'block';
          g_displayed = true;
       }
     }
    Every time you call the toggleDisplay function it will either show or hide it depending on it's previous state.. If you want more of an explination just ask

    Regards,
    Harry

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's another demo that uses the technique suggested by Harry.

    Btw Harry, Nice avatar!


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
  •