Try this if you can't change your html (function($) { $.fn.replaceClass = function(class1, class2){ $(this).removeClass(class1).addClass(class2); } })(jQuery);
$('.nav_company').hoverIntent(function() { // toggle display of company sub menu content panel $ ('.nav_sub_default, .nav_sub_products, .nav_sub_markets, .nav_sub_tools_support, .nav_sub_news_events').replaceClass ('onscreen', 'offscreen'); $('.nav_sub_company').replaceClass('offscreen', 'onscreen'); }, function(){ return false; } ); On Jan 13, 8:36 am, "r...@lighthouseuk.net" <r...@50-tuning.com> wrote: > Hi, > I'm new to jQuery and liking what I've seen so far. > > I'm curious as to whether I can reduce my code, using chaining > perhaps? > > Example... > > $('.nav_company').hoverIntent(function() { // toggle display of > company sub menu content panel > $('.nav_sub_default').removeClass('onscreen').addClass > ('offscreen'); > $('.nav_sub_company').removeClass('offscreen').addClass > ('onscreen'); > $('.nav_sub_products').removeClass('onscreen').addClass > ('offscreen'); > $('.nav_sub_markets').removeClass('onscreen').addClass > ('offscreen'); > $('.nav_sub_tools_support').removeClass('onscreen').addClass > ('offscreen'); > $('.nav_sub_news_events').removeClass('onscreen').addClass > ('offscreen'); > },function(){ > return false; > > }); > > Based on the fact that there are 6 menu items (nav_sub_x) - I > currently have the above code entered 6 times to add and remove the > necessary classes from each of the relevant DIVs on the page. > > Is there a cleaner way to do this? > Many thanks in advance. > Cheers, > Rob