JSFiddle - React, Tailwind, and code Playground

by staeff

HTML

<!DOCTYPE html>
<html>
  
  <head></head>
  
  <body>
    <div id="a"></div>
    <div id="s"></div>
    <div id="d"></div>
    <div id="f"></div>
  </body>

</html>

CSS

div {
  width: 50px;
  height: 50px;
}
#a {
  background-color: #EE0000;
}
#s {
  background-color: #00EE00;
}
#d {
  background-color: #EEEE00;
}
#f {
  background-color: #0000EE;
}

JavaScript

// slidetoggle on keypress
$(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;
    }
  });
});