[jQuery] help with toggling behavior
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;
});
});