C1NavigationList as TreeView

On a number of occasions, you wish you had something like a treeview for the iPhone where you could expand and collapse items. C1NavigationList makes it possible as it supports a number of ItemTypes (eg. HeaderItem, InputItem, GroupItem, etc). This article demonstrates a simple implementation using C1NavigationListGroupItem containing child Items which can be expanded/collapsed using jQuery.

Adding Status Label

First, we’ll add something that would tell us the status (Expanded/Collapsed) of the GroupItem. For this, we will add a ‘span’ tag to each of the C1NavigationListGroupItems with its initial text set to ‘Expanded’ and set its visibility to hidden.

function appendChildren(args) {  
  $(".C1GroupItem").append("<span>Expanded</span>");  
  $(".C1GroupItem").find("span.C1BottomTextNode").each(function () {  
  $(this).css('visibility', 'hidden');  
  });  
}

Expanding/Collapsing GroupItem

Now comes the real part of how to Expand and Collapse the GroupItem depending on its status, when it is clicked. For this we will handle the click event of the GroupItem.

$("li.C1GroupItem > span.C1TextNode").click(function () {  
});

The GroupItem is rendered as a ‘li’ element and .C1GroupItem is the css class used. ‘span’ is the element used to render text of the GroupItem with its css class as .C1TextNode. Next, we will check the status of the GroupItem using the text of the ‘C1BottomTextNode’ we added earlier. If it is Expanded, we will find all its child items using jQuery’s find() method and hide them with a sliding motion using slideUp() method. Similarly, if the GroupItem is Collapsed, we'll find its child items and unhide them using slideDown() method.

var bottomText = $(this).parent().children('span.C1BottomTextNode')[0].innerHTML;  
if (bottomText == 'Expanded') {  
  $(this).parent().find(".C1ListItem").each(function () {  
  $(this).slideUp(200);  
  });  
  $(this).parent().children('span.C1BottomTextNode')[0].innerHTML = "Collapsed";  
}  
else if (bottomText == 'Collapsed') {  
  $(this).parent().find(".C1ListItem").each(function () {  
  $(this).slideDown(600);  
  });  
  $(this).parent().children('span.C1BottomTextNode')[0].innerHTML = "Expanded";  
}

You can pass a time value in milliseconds or string values(‘slow’/‘fast’) to the slideUp() and slideDown() methods as a parameter. This determines how fast or slow the items Expand and Collapse. The default value is 400ms if no value is passed.

Conclusion

Using the above implementation, you can create a treeview like structure for an iPhone web application where you can Expand and Collapse items using C1NavigationListGroupItem. Download the attached sample for complete implementation. Download Sample