On content-heavy sites with multiple tiers of information architecture, occasionally a need arises to present several levels of nested data. If all of the info was presented in its entirety, it would be too unwieldy to be useful and would take up too much vertical space on a page. Enter the file-tree paradigm. This functionality, seen most notably in the desktop UI of Windows Explorer (not to be confused with Internet Explorer), allows a user to expand and compact layers of directories.
By using jQuery’s descendant selectors on nested unordered lists, we can hide/show additional
portions of a tree structure, as needed. This is done by adding
class="tree" to the top-level
its sublevels, producing a tree like that in Figure 13-2. Additionally, we
make use of event delegation to support numerous tiers without the
overhead of attaching event listeners to multiple elements. Instead,
the event is captured at the top level of the
<ul class="tree"> via jQuery’s
Figure 13-2. Presenting multiple levels of data through a file tree
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us"> <head> <meta ...