diff --git a/example/jquery.jOrgChart.js b/example/jquery.jOrgChart.js
index 1b97c02..f1df0cb 100644
--- a/example/jquery.jOrgChart.js
+++ b/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 = $("
");
$childNodes.each(function() {
- var $left = $(" | ").addClass("line left top");
- var $right = $(" | ").addClass("line right top");
+ var $left = $(" | ").addClass("line left top");
+ var $right = $(" | ").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);
};
diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js
index 736c30b..f1df0cb 100644
--- a/jquery.jOrgChart.js
+++ b/jquery.jOrgChart.js
@@ -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);
};
diff --git a/readme.markdown b/readme.markdown
index fa9a6c4..015dec6 100644
--- a/readme.markdown
+++ b/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 `` and ``.
* 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
+If you want a sub-tree to start off hiden, just add `class="collapsed"` to a list item (``). That list item will appear, but everything below it won't. For example:
+
+
+ - Food:
+
+ - Beer
+ - Vegetables
+
+
+ - Chocolate
+
+
+
+
*Note that you can include any amount of HTML markup in your `` **except** for other `