Make TreeView Collapsible

Make TreeView Collapsible

I have a treeView with checkboxes which works perfectly the way I want with the help of  jakecigar. Now I want to make the tree collapsible based on the tree root node. Please see demo at :



The JQuery and the html are all in the link above, but I adding the Jquery here gain 

  1. (function ($) {
  2.     function Tree() {
  3.         var $this = this;

  4.         function treeNodeClick() {
  5.             $(document).on('click', '.tree li a input[type="checkbox"]', function () {
  6.                 $(this).closest('li').find('ul input[type="checkbox"]').prop('checked', $(this).is(':checked'));
  7.             }).on('click', '.node-item', function () {
  8.                 var parentNode = $(this).parents('.tree ul');
  9.                 if ($(this).is(':checked')) {
  10.                     parentNode.find('li a .parent').prop('checked', true);
  11.                 } else {
  12.                     var elements = parentNode.find('ul input[type="checkbox"]:checked');
  13.                     if (elements.length == 0) {
  14.                         parentNode.find('li a .parent').prop('checked', false);
  15.                     }
  16.                 }
  17.             });
  18.         };

  19.         $this.init = function () {
  20.             treeNodeClick();
  21.         }
  22.     }
  23.     $(function () {
  24.         var self = new Tree();
  25.         self.init();
  26.     })
  27. }(jQuery))