I'm new to jquery (and am no javascript pro), and am having trouble figuring out two things with a behavior that I've put together:
1) how do I simplify this code so that it can be used for numerous instances on the page, without having to have repeats of the code with the ids changed out? Can I somehow 'find' partial matches between ids on the page, based on the id of the item being clicked? (Each 'pair' of items has similarly named ids -- eg. navProducts and linksProducts) 2) the 'navDim' style needs to toggle off if it's on for any <li>, but not toggle if it's not in use. I'm having trouble getting that to happen properly. The scripting for #navProducts is the most complete chunk, however it doesn't work correctly if I duplicate it similarly for my other ids. Any and all suggestions really appreciated. Thanks! Code below: jQuery.fn.slideFadeToggle = function(speed, easing, callback) { return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); }; $(document).ready(function() { $('li#navProducts').click(function() { $('li#navProducts').removeClass('navDim'); $('li#navProducts').siblings('li.navSel').removeClass('navSel'); $('#linksProducts').slideFadeToggle('normal'); $('li#navProducts').toggleClass('navSel'); $('li#navProducts').siblings('li').toggleClass('navDim'); $('#linksProducts').siblings('div:visible').slideUp('fast'); return false; }); $('li#navBrands').click(function() { $('li#navBrands').siblings('li.navSel').removeClass('navSel'); $('#linksBrands').slideFadeToggle('normal'); $(this).toggleClass('navSel'); $('#linksBrands').siblings('div:visible').slideUp('fast'); return false; }); $('li#navSites').click(function() { $('li#navSites').siblings('li.navSel').removeClass('navSel'); $('#linksSites').slideFadeToggle('normal'); $(this).toggleClass('navSel'); $('#linksSites').siblings('div:visible').slideUp('fast'); return false; }); $('li#navLocations').click(function() { $ ('li#navLocations').siblings('li.navSel').removeClass('navSel'); $('#linksLocations').slideFadeToggle('normal'); $(this).toggleClass('navSel'); $('#linksLocations').siblings('div:visible').slideUp('fast'); return false; }); });