diff --git a/src/main/webapp/js/directives.js b/src/main/webapp/js/directives.js
index 66f14c0b..ec4e4915 100644
--- a/src/main/webapp/js/directives.js
+++ b/src/main/webapp/js/directives.js
@@ -186,7 +186,9 @@ module.directive('category', [ function() {
 						});
 					};
 
-					$scope.toggleCategory = function(category) {
+					$scope.toggleCategory = function(category, event) {
+						event.preventDefault();
+						event.stopPropagation();
 						category.expanded = !category.expanded;
 						if (category.id == 'all') {
 							return;
diff --git a/src/main/webapp/templates/_category.html b/src/main/webapp/templates/_category.html
index 99b1452e..8fe2d58d 100644
--- a/src/main/webapp/templates/_category.html
+++ b/src/main/webapp/templates/_category.html
@@ -5,14 +5,14 @@
 				<i ng-class="{'icon-wrench': hovered==node}" class="icon"></i>
 			</div>
 		</div>
-		<span class="fldr">
-			<i ng-class="{'icon-caret-right': !node.expanded, 'icon-caret-down': node.expanded}" ng-click="toggleCategory(node)" ng-show="showChildren"></i>
-			<i ng-class="{'icon-star' : node.id == 'starred', 'icon-inbox': node.id == 'all'}" ng-show="!showChildren"></i>
-		</span>
-		<span ng-click="categoryClicked(node.id)">
+		<div ng-click="categoryClicked(node.id)">
+			<span class="fldr">
+				<i ng-class="{'icon-caret-right': !node.expanded, 'icon-caret-down': node.expanded}" ng-click="toggleCategory(node, $event)" ng-show="showChildren"></i>
+				<i ng-class="{'icon-star' : node.id == 'starred', 'icon-inbox': node.id == 'all'}" ng-show="!showChildren"></i>
+			</span>
 			<span ng-class="{selected: (node.id == selectedId && selectedType == 'category'), unread: unreadCount({category:node})}">{{formatCategoryName(node)}}
 			</span>
-		</span>
+		</div>
 	</div>
 	<ul ng-show="node.expanded && showChildren">
 		<recursive>