Visualizing Hierarchy with jQuery

Whether you're creating a list of fruits and vegetables, organizing a sports team roster, or an organization flow chart, you cannot get away from hierarchy. The nice thing about hierarchy in websites is that your code is often based on hierarchy, whether it's your navigation bar, links, or lists. But if you want to show hierarchy, there aren't a lot of ways to do it without a lot of work...until now. And there are even fewer ways to interact with hierarchy to swap out your items.

But there is now a very easy way to display and interact with hierarchy. A simple plugin called jQuery Organization Chart. The chart is simple to implement:

1. Make (or Generate) a list <ul> containing the elements you wish to put in hierarchy. For each level of subordination, create another <ul> and for each item, create an <li>.

2. Your root <ul> needs a class or id for the jquery to find it. <ul class="orglist">

3. One line of jQuery does the trick, once you have included both your CSS and jQuery files in your header.

$("#org").jOrgChart();

Put that in your document.ready() function and you're all set.