Eight Weeks of Prototype: Week 2, How Prototype Extends Elements
Showing and Hiding Elements
The final element extensions we are going to look at in this article are the methods using for hiding and showing elements. Using hidden elements is a useful technique for creating pages that react quickly to user interaction. One example of this is with dropdown sub-menus that only appear when the mouse hovers over a main menu item.
There are three methods involved with this, each of which accepts no arguments when called.
hide(): This method will hide an element from the display.
show(): This method will show an element that has been hidden.
toggle(): This method will show a hidden element, or hide a visible element.
One extremely important point when using these methods is that if you want to show a hidden element (using either
toggle()), the element must not have been hidden via a CSS stylesheet.
That is, if you want to initially hide an element, you must use an inline style attribute that includes
Listing 17 shows a few basic examples of using each of these methods.
To get around doing this you must do one of the following for each of the elements you want to be hidden to begin with:
- Create the elements dynamically and insert them into the DOM as hidden elements.
Note that the second suggestion here is not necessarily desirable since creating elements in real-time may affect the accessibility of your page.