hcmn/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="script.js"></script>
</head>
<body>

  <div id ="a"></div>
  <div id = "s"></div>
  <div id = "d"></div>
  <div id="f"></div>

</body>
</html>

## script.js
//page needs to be in focus before the following will work.
//slideToggle() automates slideUp() & slideDown()
//credit: Benjamin Clifford, Codecademy

$(document).ready(function(){
    $(document).keypress(function(event){
    //get string of key pressed for easier comparison than keycodes
    var keyPressed = String.fromCharCode(event.keyCode);
    //attach a handler to the appropriate div.
    var $divs = $("div");
    switch (keyPressed) {
        case "a":
            $divs.eq(0).slideToggle();
            break;
        case "s":
            $divs.eq(1).slideToggle();
            break;
        case "d":
            $divs.eq(2).slideToggle();
            break;
        case "f":
            $divs.eq(3).slideToggle();
            break;
    }
    });
});

## style.css
div{
    width: 50px;
    height: 50px;
    }
#a {
    background-color: #EE0000;
}
#s {
    background-color: #00EE00;
}
#d {
    background-color: #EEEE00;
}
#f {
    background-color: #0000EE;
}
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script src="script.js"></script>
	</head>
	<body>

	<div id ="a"></div>
	<div id = "s"></div>
	<div id = "d"></div>
	<div id="f"></div>

	</body>
	</html>
	//page needs to be in focus before the following will work.
	//slideToggle() automates slideUp() & slideDown()
	//credit: Benjamin Clifford, Codecademy

	$(document).ready(function(){
	$(document).keypress(function(event){
	//get string of key pressed for easier comparison than keycodes
	var keyPressed = String.fromCharCode(event.keyCode);
	//attach a handler to the appropriate div.
	var $divs = $("div");
	switch (keyPressed) {
	case "a":
	$divs.eq(0).slideToggle();
	break;
	case "s":
	$divs.eq(1).slideToggle();
	break;
	case "d":
	$divs.eq(2).slideToggle();
	break;
	case "f":
	$divs.eq(3).slideToggle();
	break;
	}
	});
	});
	div{
	width: 50px;
	height: 50px;
	}
	#a {
	background-color: #EE0000;
	}
	#s {
	background-color: #00EE00;
	}
	#d {
	background-color: #EEEE00;
	}
	#f {
	background-color: #0000EE;
	}