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.
Compressing .hover
javascript;jquery
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(){  menuIcon.addClass(GN_SELECTED);  menuWrapper.addClass(GN_OPEN_ALL);}, function(){  menuIcon.removeClass(GN_SELECTED);  menuWrapper.removeClass(GN_OPEN_ALL);});