Element#toggle() → Element

Toggles the visibility of element. Returns element.

Examples

<div id="welcome-message"></div>
<div id="error-message" style="display:none;"></div>
 $('welcome-message').toggle();
// -> Element (and hides div#welcome-message)
 $('error-message').toggle();
// -> Element (and displays div#error-message)

Toggle multiple elements using Enumerable#each:

['error-message', 'welcome-message'].each(Element.toggle);
// -> ['error-message', 'welcome-message']

Toggle multiple elements using Enumerable#invoke:

$('error-message', 'welcome-message').invoke('toggle');
// -> [Element, Element]

Notes

Element.toggle cannot display elements hidden via CSS stylesheets. Note that this is not a Prototype limitation but a consequence of how the CSS display property works.

<style>
  #hidden-by-css {
    display: none;
  }
</style>
 [...]
 <div id="hidden-by-css"></div>
 $('hidden-by-css').toggle(); // WONT' WORK!
// -> Element (div#hidden-by-css is still hidden!)

This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.