Merge pull request #2 from neilbowers/master

Improvement in layout, IE7 fix, and collapsed sub-trees

example/css/jquery.jOrgChart.css

@@ -26,7 +26,7 @@
 .jOrgChart td {
   text-align            : center;
   vertical-align        : top;
-  padding               : 0px 2px;
+  padding               : 0;
 }
 
 /* The node */

example/jquery.jOrgChart.js

@@ -17,7 +17,7 @@
 
   $.fn.jOrgChart = function(options) {
     var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
-	var $appendTo = $(opts.chartElement);
+    var $appendTo = $(opts.chartElement);
 
 	// build the tree
     $this = $(this);
@@ -184,8 +184,8 @@
         // Draw the horizontal lines
         var $linesRow = $("<tr/>");
         $childNodes.each(function() {
-          var $left = $("<td/>").addClass("line left top");
+          var $left = $("<td>&nbsp;</td>").addClass("line left top");
-          var $right = $("<td/>").addClass("line right top");
+          var $right = $("<td>&nbsp;</td>").addClass("line right top");
           $linesRow.append($left).append($right);
         });
 
@@ -205,10 +205,15 @@
            buildNode($(this), $td, level+1, opts);
            $childNodesRow.append($td);
         });
+
       }
       $tbody.append($childNodesRow);
     }
 
+    if ($node.hasClass('collapsed')) {
+        $nodeRow.nextAll('tr').css('display', 'none');
+    }
+
     $table.append($tbody);
     $appendTo.append($table);
   };

jquery.jOrgChart.js

@@ -184,8 +184,8 @@
         // Draw the horizontal lines
         var $linesRow = $("<tr/>");
         $childNodes.each(function() {
-          var $left = $("<td/>").addClass("line left top");
+          var $left = $("<td>&nbsp;</td>").addClass("line left top");
-          var $right = $("<td/>").addClass("line right top");
+          var $right = $("<td>&nbsp;</td>").addClass("line right top");
           $linesRow.append($left).append($right);
         });
 
@@ -205,10 +205,15 @@
            buildNode($(this), $td, level+1, opts);
            $childNodesRow.append($td);
         });
+
       }
       $tbody.append($childNodesRow);
     }
 
+    if ($node.hasClass('collapsed')) {
+        $nodeRow.nextAll('tr').css('display', 'none');
+    }
+
     $table.append($tbody);
     $appendTo.append($table);
   };

readme.markdown

@@ -14,6 +14,7 @@ Features include:
 * Showing/hiding a particular branch of the tree by clicking on the respective node.
 * Nodes can contain any amount of HTML except `<li>` and `<ul>`.
 * Easy to style.
+* You can specify that sub-trees should start collapsed, which is useful for very large trees
 
 ![jQuery OrgChart](http://i.imgur.com/2OpyG.png "jQuery OrgChart")
 
@@ -68,6 +69,23 @@ You'll need to construct a nest unordered list that represents your node nesting
 	</li>
 	</ul>
 
+If you want a sub-tree to start off hiden, just add `class="collapsed"` to a list item (`<li>`). That list item will appear, but everything below it won't. For example:
+
+	<ul id="org" style="display:none">
+      <li>Food:
+        <ul>
+          <li>Beer</li>
+          <li class=collapsed>Vegetables
+            <ul>
+              <li>Carrot</li>
+              <li>Pea</li>
+            </ul>
+          </li>
+          <li>Chocolate</li>
+        </ul>
+      </li>
+    </ul>
+
 *Note that you can include any amount of HTML markup in your `<li>` **except** for other `<ul>` or `<li>` elements.*