YUI Library Home

YUI Library Examples: TreeView Control: Folder-Style TreeView Design

TreeView Control: Folder-Style TreeView Design

This example demonstrates how you can transform the look of your TreeView Control simply by changing the CSS rules on the page. Here, the TreeView instance has a "folder style" applied to it such that branch nodes appear as open or closed folders depending on their expand/collapse state.

Implementing the Folder Style for TreeVeiw

The key change we've made in this example of the TreeView Control is that we've applied a supplementary CSS file:

This CSS redefines the look of branch nodes so they appear as folders. The folder-style CSS accompanies your YUI download and can be found in the yui/examples/treeview/assets directory.

Beyond the link element referenced above, the following markup is on the page for this example:

Based on that markup, we use the following JavaScript code to create our TreeView instance, populate its nodes, and add expand/collapse functionality:

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings