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;
     });

   });

Reply via email to