diff --git a/rpg-docs/client/lib/requestAnimationFramePolyfill.js b/rpg-docs/client/lib/requestAnimationFramePolyfill.js
new file mode 100644
index 00000000..0fb801e6
--- /dev/null
+++ b/rpg-docs/client/lib/requestAnimationFramePolyfill.js
@@ -0,0 +1,28 @@
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+
+// MIT license
+var lastTime = 0;
+var vendors = ["ms", "moz", "webkit", "o"];
+for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+	window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
+	window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] ||
+	window[vendors[x] + "CancelRequestAnimationFrame"];
+}
+
+if (!window.requestAnimationFrame)
+window.requestAnimationFrame = function(callback, element) {
+	var currTime = new Date().getTime();
+	var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+	var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+	timeToCall);
+	lastTime = currTime + timeToCall;
+	return id;
+};
+
+if (!window.cancelAnimationFrame)
+window.cancelAnimationFrame = function(id) {
+	clearTimeout(id);
+};
diff --git a/rpg-docs/client/views/character/effects/effectEdit/effectEdit.html b/rpg-docs/client/views/character/effects/effectEdit/effectEdit.html
index 3ae51b94..078cd946 100644
--- a/rpg-docs/client/views/character/effects/effectEdit/effectEdit.html
+++ b/rpg-docs/client/views/character/effects/effectEdit/effectEdit.html
@@ -20,26 +20,28 @@
 			<div class="effectEdit layout horizontal flex">
 				<dicecloud-selector class="statMenu flex" selected={{stat}} selectable="paper-item" style="height: 100%; overflow-y: auto;">
 					{{#each statGroups}}
-						<div style="font-weight: bold; margin-top: 16px; padding-left: 8px;">
+						<div class="statGroupTitle clickable" style="font-weight: bold; margin-top: 16px; padding-left: 8px;">
 							{{this}}
 						</div>
-						{{#each stats}}
-							<paper-item name={{stat}}>{{name}}</paper-item>
-						{{/each}}
+						<iron-collapse opened={{isGroupSelected this ../stat}}>
+							{{#each stats}}
+								<paper-item name={{stat}} class="clickable">{{name}}</paper-item>
+							{{/each}}
+						</iron-collapse>
 					{{/each}}
 				</dicecloud-selector>
 				{{#if operations}}
 					<dicecloud-selector class="operationMenu flex" selected={{operation}}  style="height: 100%; overflow-y: auto;">
 						{{#each operations}}
-							<paper-item name={{operation}}>{{name}}</paper-item>
+							<paper-item name={{operation}} class="clickable">{{name}}</paper-item>
 						{{/each}}
 					</dicecloud-selector>
 				{{else}} {{#if showMultiplierOperations}}
 					<dicecloud-selector class="multiplierMenu flex"
 							   selected={{value}}>
-						<paper-item name="0.5">Resistance</paper-item>
-						<paper-item name="2">Vulnerability</paper-item>
-						<paper-item name="0">Immunity</paper-item>
+						<paper-item name="0.5" class="clickable">Resistance</paper-item>
+						<paper-item name="2" class="clickable">Vulnerability</paper-item>
+						<paper-item name="0" class="clickable">Immunity</paper-item>
 					</dicecloud-selector>
 				{{else}}
 					<div class="flex" style="height: 100%;"></div>
diff --git a/rpg-docs/client/views/character/effects/effectEdit/effectEdit.js b/rpg-docs/client/views/character/effects/effectEdit/effectEdit.js
index d18538fa..b47f7219 100644
--- a/rpg-docs/client/views/character/effects/effectEdit/effectEdit.js
+++ b/rpg-docs/client/views/character/effects/effectEdit/effectEdit.js
@@ -149,47 +149,71 @@ Template.effectEdit.helpers({
 	effectValue: function(){
 		return this.calculation || this.value;
 	},
+	isGroupSelected: function(groupName, statName){
+		var stat = statsDict[statName]
+		return stat && (stat.group === groupName);
+	},
 });
 
+var setStat = function(statName, effectId){
+	var setter = {stat: statName};
+	var effect = Effects.findOne(this._id);
+	var group = statsDict[statName].group;
+	if (group === "Saving Throws" || group === "Skills"){
+		// Skills must have a valid skill operation
+		if (!_.contains(
+			_.map(skillOperations, ao => ao.operation),
+			effect.operation
+		)){
+			setter.operation = "add";
+		}
+	} else if (group !== "Weakness/Resistance"){
+		// Attributes must have a valid attribute operation
+		if (!_.contains(
+			_.map(attributeOperations, ao => ao.operation),
+			effect.operation
+		)){
+			setter.operation = "base";
+		}
+	} else {
+		// Weakness/Resistance must have a mul operation and value
+		if (effect.operation !== "mul"){
+			setter.operation = "mul";
+		}
+		if (!_.contains([0, 0.5, 2], effect.value)){
+			setter.value = 0.5;
+		}
+	}
+	Effects.update(effectId, {$set: setter});
+};
+
+var scrollAnimationId;
+var scrollElementToView = element => {
+	var scrollFunction =  function(){
+		element.scrollIntoView();
+		scrollAnimationId = requestAnimationFrame(scrollFunction);
+	};
+	return scrollFunction;
+}
+
 Template.effectEdit.events({
 	"click #deleteButton": function(event, instance){
 		Effects.softRemoveNode(instance.data.id);
 		GlobalUI.deletedToast(instance.data.id, "Effects", "Effect");
 		popDialogStack();
 	},
+	"click .statGroupTitle": function(event, instance){
+		var groupName = this.toString();
+		var firstStat = statGroups[groupName][0].stat;
+		setStat(firstStat, instance.data.id);
+		scrollAnimationId = requestAnimationFrame(scrollElementToView(event.target));
+		_.delay(() => cancelAnimationFrame(scrollAnimationId), 300);
+	},
 	"iron-select .statMenu": function(event){
 		var detail = event.originalEvent.detail;
 		var statName = detail.item.getAttribute("name");
 		if (statName == this.stat) return;
-		var setter = {stat: statName};
-		var group = Blaze.getData(detail.item).group;
-		var effect = Effects.findOne(this._id);
-		if (group === "Saving Throws" || group === "Skills"){
-			// Skills must have a valid skill operation
-			if (!_.contains(
-				_.map(skillOperations, ao => ao.operation),
-				effect.operation
-			)){
-				setter.operation = "add";
-			}
-		} else if (group !== "Weakness/Resistance"){
-			// Attributes must have a valid attribute operation
-			if (!_.contains(
-				_.map(attributeOperations, ao => ao.operation),
-				effect.operation
-			)){
-				setter.operation = "base";
-			}
-		} else {
-			// Weakness/Resistance must have a mul operation and value
-			if (effect.operation !== "mul"){
-				setter.operation = "mul";
-			}
-			if (!_.contains([0, 0.5, 2], effect.value)){
-				setter.value = 0.5;
-			}
-		}
-		Effects.update(this._id, {$set: setter});
+		setStat(statName, this._id);
 	},
 	"iron-select .operationMenu": function(event){
 		var detail = event.originalEvent.detail;
diff --git a/rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selectable.html b/rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selectable.html
index fceeba7e..c88c3a30 100644
--- a/rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selectable.html
+++ b/rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selectable.html
@@ -249,7 +249,9 @@
     },
 
     _updateItems: function() {
-      var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*');
+      var nodes = this.selectable
+        ? Polymer.dom(this).querySelectorAll(this.selectable)
+        : Polymer.dom(this).queryDistributedElements('*');
       nodes = Array.prototype.filter.call(nodes, this._bindFilterItem);
       this._setItems(nodes);
     },