Enhancement : Toggle Add Group on Click, @blizzz have a look here.

settings/css/settings.css

@@ -51,6 +51,11 @@ table.nostyle label { margin-right: 2em; }
 table.nostyle td { padding: 0.2em 0; }
 
 /* USERS */
+#newgroup-init a span { margin-left: 20px; }
+#newgroup-init a span:before {
+	position: absolute;	left: 12px; top:-2px;
+	content: '+'; font-weight: bold; font-size: 150%;
+}
 .usercount { float: left; margin: 5px; }
 li.active span.utils .delete {
 	float: left; position: relative; opacity: 0.5;

settings/js/users/groups.js

@@ -64,7 +64,23 @@ $(document).ready( function () {
 		// Call function for handling delete/undo on Groups
 		GroupList.delete_group(gid);
 	});
-	$('#newgroup').submit(function (event) {
+
+	// Display or hide of Create Group List Element
+	$('#newgroup-form').hide();
+	$('#newgroup-init').on('click', function (e) {
+		e.stopPropagation();
+		$('#newgroup-form').show();
+		$('#newgroup-init').hide();
+		$(document).click( function (e) {
+			if (e.target.id !== 'newgroup-form') {
+				$("#newgroup-form").hide();
+				$("#newgroup-init").show();
+			}			
+		});
+	});
+
+	// Responsible for Creating Groups.
+	$('#newgroup-form form').submit(function (event) {
 		event.preventDefault();
 		var groupname = $('#newgroupname').val();
 		if ($.trim(groupname) === '') {

settings/templates/users/part.grouplist.php

@@ -1,7 +1,12 @@
 <ul>
 	<!-- Add new group -->
-	<li>
-		<form id="newgroup">
+	<li id="newgroup-init">
+		<a href="#">
+			<span><?php p($l->t('Add Group'))?></span>
+		</a>
+	</li>
+	<li id="newgroup-form">
+		<form>
 			<input type="text" id="newgroupname" placeholder="<?php p($l->t('Group')); ?>..." />
 			<input type="submit" class="button" value="<?php p($l->t('Add Group'))?>" />
 		</form>