jQuery in Action
130
CHAPTER 5
Sprucing up with animations and effects
A list of this size is relatively easy to digest, but it's easy to imagine it getting
longer and deeper, in which case presenting the full list to users could cause them
to suffer from the dreaded Information Overload Syndrome.
longer and deeper, in which case presenting the full list to users could cause them
to suffer from the dreaded Information Overload Syndrome.
We want to instrument all list items that contain another embedded list so that
the embedded content is hidden until the users choose to view it by clicking the
item. After such a click, the child content of the item will be revealed, and a sub-
sequent click will hide the contents again.
item. After such a click, the child content of the item will be revealed, and a sub-
sequent click will hide the contents again.
If we only hide the content of items that contain child lists (items 3 and 4 of
the topmost list, for example), we'd likely confuse the users because they'd have
no way of knowing these items are active and expandable; we need to visually
distinguish these expandable items from those that are leaf items (those that
can't be expanded). We do that by changing the cursor to the hand when it
passes over an active item, as well as replacing its list marker with the ubiquitous
plus- and minus-sign graphics to indicate that the item can be either expanded
or collapsed.
no way of knowing these items are active and expandable; we need to visually
distinguish these expandable items from those that are leaf items (those that
can't be expanded). We do that by changing the cursor to the hand when it
passes over an active item, as well as replacing its list marker with the ubiquitous
plus- and minus-sign graphics to indicate that the item can be either expanded
or collapsed.
We'll start the list off in its fully collapsed state and let the users take it from
there. After instrumentation, the list will appear as shown in figure 5.2 when ini-
tially displayed.
tially displayed.
Figure 5.1 The nested list before we get our hands on it