Current Portfolio:

Toggle To Your Heart's Content

Tuesday November 23rd 2004

In the world of DHTML, one of the most commonly used behaviors is the hiding/revealing of certain page elements. You'd likely find this on detailed, multi-tiered navigation systems, where hovering over one navigation link might reveal a floating series of sub-links pertaining to that section; hovering over one of those nested links might reveal yet another floating subset of links; and so on. If the mouse were to roll off of these links, their corresponding subnavigation links would quietly disappear.

Alternatively, you might see these hidden/revealed sections actually show up within the "flow" of the rest of the page, wherein other page content would actually slide out of the way and down the page to make room for the newly revealed elements. Once they're hidden, the page's content would slide back into place. Gmail uses this quite a bit, and when used gracefully it's a wickedly smart design tool (just be wary of accessibility issues).

Free scripts for things like this abound on the internet, and nearly all of them create a function named/called "toggle", which "toggles" a page element's visibility/display on or off. A friend of mine was using one such free script the other day, but wanted to actually hide/reveal two separate elements at a time, not just one. But her script didn't allow for it, and neither did any others I found online. The quick solution was to simply call the toggle() function twice, one for each page element, but it seemed to me that she should have a better alternative. . .

Every JavaScript function has a built in arguments[] array, which allows you to do things: One, access function arguments without knowing their given variable names; and Two, access all arguments of the function, regardless of the number, thus effectively removing the need to pre-define how many arguments it might receive. Slipping this simple step into the otherwise perfect toggle() function gives you a much more versatile solution.

Toggle 'visibility' (show/hide elements "out of flow" of document)

  1. function toggle_visibility()
  2. {
  3. if (document.getElementById)
  4. {
  5. for (var i = 0; i < arguments.length; i++)
  6. {
  7. target = document.getElementById(arguments[i]);
  8. if (target.style.visibility == "hidden")
  9. {
  10. target.style.visibility = "visible";
  11. } else {
  12. target.style.visibility = "hidden";
  13. }
  14. }
  15. }
  16. }

See a working demo of toggling visibility.

Toggle 'display' (show/hide elements "within the flow" of document)

  1. function toggle_display()
  2. {
  3. if (document.getElementById)
  4. {
  5. for (var i = 0; i < arguments.length; i++)
  6. {
  7. target = document.getElementById(arguments[i]);
  8. if (target.style.display == "none")
  9. {
  10. target.style.display = "";
  11. } else {
  12. target.style.display = "none";
  13. }
  14. }
  15. }
  16. }

See a working demo of toggling display.

Archives