Project Home

This example show default script behaviour.

$('#tree1').checkboxTree();

This example show how to use images to handle collapse/expand feature.

$('#tree2').checkboxTree({ collapseImage: 'images/minus.png', expandImage: 'images/plus.png', });

This example show:

$('#tree3').checkboxTree({ onCheck: { node: 'expand' }, onUncheck: { node: 'collapse' }, collapseImage: 'images/downArrow.gif', expandImage: 'images/rightArrow.gif', });

This example show how to add buttons to collapse/expand all tree.

$('#tree4').checkboxTree({ collapseAllButton: { html: 'Self-generated Collapse all', container: $('#buttons-4') }, collapseAllElement: '#collapseAll', expandAllButton: { html:'Self-generated Expand all', container: $('#buttons-4') }, expandAllElement: $('#expandAll') });

This example show how to use external API.

tree = $('#tree5').checkboxTree(); $('#collapse').click(function(){ tree.collapse($('#node23')); }); $('#expand').click(function(){ tree.expand($('#node23')); }); $('#check').click(function(){ tree.check($('#node23')); }); $('#uncheck').click(function(){ tree.uncheck($('#node23')); });
Collapse node 2.3 | Expand node 2.3
Check node 2.3 | Uncheck node 2.3

This example show how to initialize a tree.

$('#tree6').checkboxTree({ initializeChecked: 'expanded', initializeUnchecked: 'collapsed' });