Navigating with a File-Tree Expander - J Query

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 addingclass="tree" to the top-level unordered list and using a combination of CSS and Java-Script to unveil its sublevels, producing a tree like that in


Figure : (Presenting multiple levels of data through a file tree). 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’ method.

File tree—HTML code

File tree—jQuery code


The tree code begins by attaching event handlers to links with class names of expand_all and collapse_all. If either link is clicked, then we traverse the DOM upward to the parent <p>, over to the next <ul>, and then down into its children. Each child link with class="tree_trigger" receives the class of trigger_expanded, and each subsequent <ul>receives the class tree_expanded. These class names correspond to the CSS rules that change their visual appearance. In the case of the trigger links, they have an expanded icon. As for the lists, they are now display: block instead of display: none.
The “live” event listener listens for clicks anywhere within the tree. Basically, this listens for clicks anywhere within the <ul class="tree">and then determines whether the click happened on a link with class="trigger". If so, it executes the associated code.
The benefit of using .live(), as opposed to adding a click handler directly to each link,is that the code is associated with all existing and future elements that match the criteria.
The benefit of this is twofold: you don’t waste time attaching event listeners to numerous elements, and if dynamic content is inserted via Ajax, it is affected by the “live”event listener as well.
Next, we add a style hook of class="last" via JavaScript to each <li>that is the :last child of its parent. This allows us to position a background image that simulates connectivity throughout the tree, via a light gray line. Finally, if any child <ul>has beenhard-coded to be visible when the page loads via class="tree_expanded", we traverse the DOM and add class="tree_trigger_expanded" to the nearest trigger link.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

J Query Topics