toggle toolbar with a keyboard shortcut

css/styles.css

@@ -21,7 +21,6 @@
 	-webkit-box-shadow: 0 0 4px #000;
 	-moz-box-shadow: 0 0 4px #000;
 	box-shadow: 0 0 4px #000;
-	
 }
 
 .cb-control.cb-navigate {
@@ -29,8 +28,8 @@
 	margin: 0;
 	cursor: pointer;
 	width: 128px;
-	background: center no-repeat;
 	opacity: 0;
+	background: center no-repeat;
 }
 
 .cb-control.cb-navigate:hover {
@@ -54,20 +53,16 @@
 #cb-toolbar {
 	top: 0;
 	height: 25px;
-	opacity: 0;
 	border-top: none;
 	border-left: none;
 	border-right: none;
+	display: none;
 }
 
 #cb-toolbar #cb-status {
 	float: right;
 }
 
-#cb-toolbar:hover {
-	opacity: 1;
-}
-
 #cb-color {
 	width: 200px;
 	height: 150px;

lib/ComicBook.js

@@ -77,7 +77,8 @@ function ComicBook(id, srcs, opts) {
 			next: 78,
 			previous: 80,
 			control: {
-				color: 69
+				color: 69,
+				toolbar: 84
 			}
 		}
 	};
@@ -324,12 +325,16 @@ function ComicBook(id, srcs, opts) {
 		this.getControl(control).hide();
 	};
 
+	ComicBook.prototype.toggle = function(e) {
+		e.toggle();
+	};
+
 	ComicBook.prototype.toggleControl = function(control) {
-		if (this.getControl(control).is(":visible")) {
-			this.hideControl(control);
-		} else {
-			this.showControl(control);
-		}
+		ComicBook.prototype.toggle(this.getControl(control));
+	};
+
+	ComicBook.prototype.toggleToolbar = function() {
+		ComicBook.prototype.toggle($("#cb-toolbar"));
 	};
 
 	ComicBook.prototype.toggleLayout = function() {
@@ -707,8 +712,14 @@ function ComicBook(id, srcs, opts) {
 				break;
 			case "keydown":
 
+				// navigation
 				if (e.keyCode === options.keyboard.previous) { side = "left"; }
 				if (e.keyCode === options.keyboard.next) { side = "right"; }
+
+				// display controls
+				if (e.keyCode === options.keyboard.control.toolbar) {
+					ComicBook.prototype.toggleToolbar();
+				}
 				if (e.keyCode === options.keyboard.control.color) {
 					ComicBook.prototype.toggleControl("color");
 				}