How to hide, fade in and fade out div with jQuery and keyboard controls? -

i'm wanting show , hide div using keyboard controls, required functionality is:

• hide div on page load
• fade in div when doing key combination (either ctrl + shift + i or f + i)
• fade out div when doing key combination (either ctrl + shift + o or f + o)

i working with:

http://www.michaelckennedy.net/samples/blog/hotkeys/

but doesn't seem work firefox.

i attempting use:

https://keithamus.github.io/jwerty/

which has detailed readme here:

https://github.com/keithamus/jwerty/blob/master/readme-detailed.md

i not familiar jquery terminology , therefore can't quite figure out how implement required functionality.

my first attempt was:

<script src="js/jwerty.js"></script> <script> $(document).ready(function() { $("#mydiv").hide(); });  jwerty.key('f+i', function () { $("#mydiv").fadein(400); });  jwerty.key('f+o', function () {  $("#mydiv").fadeout(400); }); </script> 

solution: use comma between letters.

<script> $(document).ready(function() { $("#mydiv").hide(); });  jwerty.key('f,i', function () { $("#mydiv").fadein(400); });  jwerty.key('f,o', function () {  $("#mydiv").fadeout(400); }); </script>