# Compressing .hover

I have 5 or 6 ID's and I need to compress .hover jQuery into smaller amounts. I tried this answer, but due to how he needed only 1 "group" inside the .hover function, it makes mine not work because I need a way to have 2 "groups" inside the function.

$(document).ready(function(){$("#menuicon").click(function(){
$("#menuicon").addClass("gn-selected");$("#menuwrapper").addClass("gn-open-all");
});

$("#menuicon").hover(function(){$("#menuicon").addClass("gn-selected");
$("#menuwrapper").addClass("gn-open-all"); }, function(){$("#menuicon").removeClass("gn-selected");
$("#menuwrapper").removeClass("gn-open-all"); });$("#menuwrapper").hover(function(){
$("#menuicon").addClass("gn-selected");$("#menuwrapper").addClass("gn-open-all");
}, function(){
$("#menuicon").removeClass("gn-selected");$("#menuwrapper").removeClass("gn-open-all");
});

$(".gn-scrollbar").hover(function(){$("#menuicon").addClass("gn-selected");
$("#menuwrapper").addClass("gn-open-all"); }, function(){$("#menuicon").removeClass("gn-selected");
$("#menuwrapper").removeClass("gn-open-all"); });$(".gn-menu").hover(function(){
$("#menuicon").addClass("gn-selected");$("#menuwrapper").addClass("gn-open-all");
}, function(){
$("#menuicon").removeClass("gn-selected");$("#menuwrapper").removeClass("gn-open-all");
});
});


The gn-selected and gn-open-all is just part of my CSS it uses transformX to update the height and width in a responsive way.

• What effect do the gn-selected and gn-open-all classes have, visually or functionally? In other words, why are you doing this? (Feel free to clarify by editing the answer, possibly by including a live demonstration using Ctrl-M.) – 200_success Sep 9 '15 at 4:03

jQuery's $ function, like CSS, also accepts comma-separated selectors for multiple matches. Plus, if #menuicon and #menuwrapper don't change, then you can store their jQuery-wrapped versions into a variable for reuse. Avoids all that wrapping every hover. Even further, if you find yourself writing those class names all over the place, you could also store it in a "constant". The advantage of this is that you only have to modify the string value in one place rather than in multiple places. Since JS doesn't have constants in most browsers (yet), you can use the all caps and underscores convention. You can shorten all of those into something like this. var GN_SELECTED = 'gn-selected'; var GN_OPEN_ALL = 'gn-open-all'; var menuIcon =$("#menuicon");
var menuWrapper = $("#menuwrapper"); menuIcon.click(function(){ menuIcon.addClass(GN_SELECTED); menuWrapper.addClass(GN_OPEN_ALL); });$("#menuicon, #menuwrapper, .gn-menu, .gn-scrollbar").hover(function(){

• One last thing, Why wont something like var show = '"display", "block"'; & div.css(show); work? – John123 Sep 9 '15 at 13:13