Clickable Highlight

angular.treeview.js

@@ -52,9 +52,9 @@
 							'<i class="expanded" data-ng-show="node.' + nodeChildren + '.length && !node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
 							'<i class="normal" data-ng-hide="node.' + nodeChildren + '.length"></i> ' +
 							'<span data-ng-class="node.selected" data-ng-click="' + treeId + '.selectNodeLabel(node)">{{node.' + nodeLabel + '}}</span>' +
-							'<div data-ng-hide="node.collapsed" data-tree-id="' + treeId + '" data-tree-model="node.' + nodeChildren + '" data-node-id=' + nodeId + ' data-node-label=' + nodeLabel + ' data-node-children=' + nodeChildren + '></div>' +
-						'</li>' +
-					'</ul>';
+                            '<div data-ng-hide="node.collapsed"  data-tree-id="'+treeId+'" data-tree-model="node.' + nodeChildren + '" data-node-id="' + nodeId +'" data-node-label="' + nodeLabel + '" data-node-children="' + nodeChildren + '"></div>' +
+                        '</li>' +
+                    '</ul>';
 
 
 				//check tree id, tree model
@@ -76,6 +76,9 @@
 						//if node label clicks,
 						scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel || function( selectedNode ){
 
+                        //Collapse or Expand
+                        selectedNode.collapsed = !selectedNode.collapsed;
+
 							//remove highlight from previous node
 							if( scope[treeId].currentNode && scope[treeId].currentNode.selected ) {
 								scope[treeId].currentNode.selected = undefined;

css/angular.treeview.css

@@ -29,13 +29,13 @@ div[data-tree-model] li {
 
 div[data-tree-model] li .expanded {
   padding: 1px 10px;
-  background-image: url("../img/folder.png");
+  background-image: url("../img/sub.png");
   background-repeat: no-repeat;
 }
 
 div[data-tree-model] li .collapsed {
   padding: 1px 10px;
-  background-image: url("../img/folder-closed.png");
+  background-image: url("../img/add.png");
   background-repeat: no-repeat;
 }
 
@@ -50,7 +50,7 @@ div[data-tree-model] li i, div[data-tree-model] li span {
 }
 
 div[data-tree-model] li .selected {
-  background-color: #aaddff;
+  background-color: lightgrey;
   font-weight: bold;
   padding: 1px 5px;
 }