[thelist] Show hide <div>

[.jeff]

daniel,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Daniel Fascia
>
> have a look at www.fascianewmedia.co.uk to see my 1 line
> of code that creates dropdown menus which are
> shamelessly non compatible with NS4, Opera <7 and
> probably others... but then I have provided alternative
> links to the same places.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

set a background color for the body.  i get a nasty grey, rather than the
browser default white which makes it quite obvious you've forgotten to
specify something.

give a look over this article:

Links & JavaScript Living Together in Harmony
http://evolt.org/article/thelist/17/20938/

as to your one line of code, at least do the world a favor and do some
method detection to see if the browser supports the getElementById() method
before calling it.  for safety sake, i'd highly recommend prefacing your
call to the method with the document object.  just because browsers will let
you access it directly (assuming the document object since it's missing)
doesn't mean they'll always work that way.  also, why are you using the
getElementById() method when setting the display property, but not when
you're reading it?  personally, i'd highly recommend moving this to a
function:

<script language="JavaScript" type="text/javascript">
<!--
  var current_menu = null;

  function toggleDisplay(menuId)
  {
    if(!document.getElementById) return true;
    else
    {
      if(current_menu)
      {
        oMenu = document.getElementById(current_menu);
        oMenu.style.display = 'none';
      }
      oMenu = document.getElementById(menuId);
      if(oMenu.style.display == 'none' && current_menu != menuId)
      {
        oMenu.style.display = 'block';
        current_menu = menuId;
      }
      else
        current_menu = null;
      return false;
    }
  }
// -->
</script>

then, it's just a matter of calling it like this:

<a href="/clients.html"
   onclick="return toggleDisplay('drp_1');"
>Clients</a>

browsers that support the getElementById() method will stay on the same page
and have the menu toggle open.  if there was another submenu open, it'll be
closed first.  browsers that don't support the getElementById() method will
simply return true to the onclick event handler allowing the browser to
follow the link, just as non-javascript enabled/capable browsers will do.

later,

.jeff

http://evolt.org/
jeff at members.evolt.org
http://members.evolt.org/jeff/