jQuery in Action
128
CHAPTER 5
Sprucing up with animations and effects
Second, if an element starts as hidden by having its
display
style property value
explicitly set to
none
, the
show()
command will always set its
display
style prop-
erty value to
block
. That's even if the element would typically default to
inline
for its
display
value--as would a
<span>
element, for example. If the element
starts out without an explicitly declared
display
value, and we use the jQuery
hide()
command to hide it, the
show()
command will remember the original
value and restore it to that original
display
state.
So it's usually a good idea not to use
style
attributes on the elements we want
initially hidden, but to apply the
hide()
command to them in the page's ready
handler. This prevents them from being displayed on the client, and also makes
sure everything is in a known initial state and will behave as expected during sub-
sequent hide and show operations.
sure everything is in a known initial state and will behave as expected during sub-
sequent hide and show operations.
Let's see about putting these commands to good use.
5.1.1 Implementing a collapsible list
Inundating a user with too much information at once is a common and classic
user interface boo-boo. It's best to allow users to ask for information in digestible
chunks that are under their control. This is a tiny glimpse into a larger principle
known as progressive disclosure (which we were introduced to in the previous chap-
ter) in which the data presented to users is kept to the minimum and expanded as
required to perform the task at hand.
user interface boo-boo. It's best to allow users to ask for information in digestible
chunks that are under their control. This is a tiny glimpse into a larger principle
known as progressive disclosure (which we were introduced to in the previous chap-
ter) in which the data presented to users is kept to the minimum and expanded as
required to perform the task at hand.
A good example of this might be browsing the filesystem of a computer. This
information is frequently presented as a hierarchical list in which the content of
folders is nested to the depth required to represent all files and folders on the sys-
tem. It would be ludicrous to try to present all the files and folders on the system
at once! A better approach is to allow each level in the list to be opened or closed
to reveal the contained hierarchical information. You've surely seen such controls
in any application that allows you to browse the filesystem.
folders is nested to the depth required to represent all files and folders on the sys-
tem. It would be ludicrous to try to present all the files and folders on the system
at once! A better approach is to allow each level in the list to be opened or closed
to reveal the contained hierarchical information. You've surely seen such controls
in any application that allows you to browse the filesystem.
In this section, we'll see how to use the
hide()
and
show()
commands to instru-
ment a nested list that acts in this manner.
NOTE
There are some nifty plugins that provide this type of control out-of-the-
box if, once you understand the principles behind it, you'd rather use a
ready-made solution than write your own.
box if, once you understand the principles behind it, you'd rather use a
ready-made solution than write your own.
To start, let's take a look at the
HTML
structure of the list we'll use to test our code.
<body>
<fieldset>
<legend>Collapsible List — Take 1</legend>