Add an option to ignore space used by collapsed nodes

Every nodes from the first level will be drawn without a parent
on the first line of the graph with a list like :
<ul>
  <li>First</li>
  <li>Second
    <ul>
      <li>Sublevel</li>
    </ul>
  </li>
</ul>

jquery.jOrgChart.js

@@ -21,7 +21,7 @@
     $this = $(this);
     var $container = $("<div class='" + opts.chartClass + "'/>");
     if($this.is("ul")) {
-      buildNode($this.find("li:first"), $container, 0, opts);
+      buildNodes($this, $container, opts);
     }
     else if($this.is("li")) {
       buildNode($this, $container, 0, opts);
@@ -99,9 +99,29 @@
     chartElement : 'body',
     depth      : -1,
     chartClass : "jOrgChart",
-    dragAndDrop: false
+    dragAndDrop: false,
+    ignoreSpace: false
   };
   
+  function buildNodes($list, $appendTo, opts) {
+    var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
+    var $tbody = $("<tbody/>");
+
+    // Construct the node container(s)
+    var $nodeRow = $("<tr/>");
+    $list.children("li").each(function(i, elem) {
+      var $td = $("<td class='node-container'/>");
+      $td.attr("colspan", 2);
+
+      buildNode($(elem), $td, 0, opts);
+      $nodeRow.append($td);
+    });
+
+    $tbody.append($nodeRow);
+    $table.append($tbody);
+    $appendTo.append($table);
+  }
+
   var nodeCount = 0;
   // Method that recursively builds the tree
   function buildNode($node, $appendTo, level, opts) {
@@ -141,7 +161,7 @@
           if($tr.hasClass('contracted')){
             $this.css('cursor','n-resize');
             $tr.removeClass('contracted').addClass('expanded');
-            $tr.nextAll("tr").css('visibility', '');
+            $tr.nextAll("tr").css(opts.ignoreSpace ? 'display' : 'visibility', '');
 
             // Update the <li> appropriately so that if the tree redraws collapsed/non-collapsed nodes
             // maintain their appearance
@@ -149,7 +169,8 @@
           }else{
             $this.css('cursor','s-resize');
             $tr.removeClass('expanded').addClass('contracted');
-            $tr.nextAll("tr").css('visibility', 'hidden');
+            if(opts.ignoreSpace) { $tr.nextAll("tr").css('display', 'none'); }
+            else { $tr.nextAll("tr").css('visibility', 'hidden'); }
 
             $node.addClass('collapsed');
           }
@@ -211,7 +232,8 @@
         $.each(classList, function(index,item) {
             if (item == 'collapsed') {
                 console.log($node);
-                $nodeRow.nextAll('tr').css('visibility', 'hidden');
+                if(opts.ignoreSpace) { $nodeRow.nextAll('tr').css('display', 'none'); }
+                else { $nodeRow.nextAll('tr').css('visibility', 'hidden'); }
                     $nodeRow.removeClass('expanded');
                     $nodeRow.addClass('contracted');
                     $nodeDiv.css('cursor','s-resize');

readme.markdown

@@ -117,9 +117,10 @@ Source code with an example is available [here](https://github.com/wesnolte/jOrg
 
 ##Configuration
 
-There are only 3 configuration options.
+There are only 5 configuration options.
 
 1. **chartElement** - used to specify which HTML element you'd like to append the OrgChart markup to. *[default='body']*
 2. **depth** - tells the code what depth to parse to. The default value of "-1" instructs it to parse like it's 1999. *[default=-1]*
 3. **chartClass** - the name of the style class that is assigned to the generated markup. *[default='jOrgChart']*
 4. **dragAndDrop** - determines whether the drag-and-drop feature of tree node elements is enabled. *[default=false]*
+5. **ignoreSpace** - if true, no space is used by collapsed nodes. if false, the width and height of the graph stays the same when collapsing nodes. *[default=false]*