Cacher is the code snippet organizer for pro developers

#A more accessible burger menu# A more accessible menu so that users can open/close the menu by tabbing to it instead of binding everything to click events. Also allow for Esc key to close the menu. ##JS (jQuery)##

jQuery('.c-header__mob-burger').on('click', function() {
    jQuery(this.hash).toggleClass('mob-active').focus();
    console.log(this.hash);
});

jQuery('.c-primary-navigation').on({
    focusout: function () {
        jQuery(this).data('timer', setTimeout(function () {
            jQuery(this).removeClass('mob-active');
        }.bind(this), 0));
    },
    focusin: function () {
        clearTimeout(jQuery(this).data('timer'));
    },
    keydown: function (e) {
    if (e.which === 27) {
        jQuery(this).removeClass('mob-active');
            e.preventDefault();
        }
    }
});

jQuery('.c-header__mob-burger').on({
    focusout: function () {
        jQuery(this.hash).data('timer', setTimeout(function () {
            jQuery(this.hash).removeClass('mob-active');
        }.bind(this), 0));
    },
    focusin: function () {
        clearTimeout(jQuery(this.hash).data('timer'));
        console.log("burger focusin");
    }
});

##CSS##

div {
  display: none;
}
.active {
  display: block;
}

##HTML##

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>