Home arrow JavaScript arrow Page 3 - Opened and Closed Branches on a TreeView jQuery Hierarchical Navigation System

Controlling the tree’s branches display with the closed CSS class - JavaScript

If you’re interested in mastering the main features that come bundled with the TreeView jQuery plug-in, start reading this series of articles. In it you’ll find numerous examples that will teach you how to utilize this library to build all sorts of professional-looking navigation trees. This is the second part of a four-part series.

TABLE OF CONTENTS:
  1. Opened and Closed Branches on a TreeView jQuery Hierarchical Navigation System
  2. Building basic hierarchical trees with the TreeView plug-in
  3. Controlling the tree’s branches display with the closed CSS class
  4. Collapsing tree branches with the TreeView plug-in
By: Alejandro Gervasio
Rating: starstarstarstarstar / 3
April 27, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
 

In the preceding section, you learned how to build a couple of hierarchical trees where all of the branches were displayed in two specific states: opened and closed. Nonetheless, there might be cases where it would be necessary to combine these conditions simultaneously. The question is, how can this be done from inside the tree’s markup? Well, it’s extremely simple to achieve this by assigning the “closed” CSS class to the branches that need be collapsed and by removing it from the others. 

To learn how this process works, look at the following code sample, which mixes expanded and closed branches within the same tree:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (only some branches are initially closed)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview();

});

</script>

</head>

<body>

<ul id="menu">

<li class="closed">Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li class="closed">Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li class="closed">Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

 

There you have it. See how easy it is to combine closed and expanded branches in the same hierarchical tree? I guess you do, since the process is extremely simple to follow. In this particular case, the “closed” CSS class has been assigned to all the branches that need to be displayed open initially, while it’s been removed from the ones that are shown collapsed. 

Undeniably, the “TreeView” plug-in is flexible enough for controlling, from inside the tree’s markup, how branches will be displayed on screen. Even so, at this point you might be wondering if this same process can be performed directly with the plug-in's own options, and fortunately the answer is a resounding yes! 

As I said in the introduction, the plug-in permits you to control the way that branches are shown initially via a specific option called “collapsed.” In the next section I’m going to discuss its usage in a concrete case in depth. 

Now, to learn more about how to use this plug-in option, go ahead and read the next section. 



 
 
>>> More JavaScript Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: