Question

I have a bit of code that controls some divs but its repeats a lot just for one little change on a different link

If I click #Option1 then 2-5 shrink to 0 (if any of them are open) and go to 0 opacity
and vice versa if you click 2 (collapsing 1 and the rest) but i cant think of a good way to make it more generic but there has to be a way

$('#Option1').click(function() {
      var ele = $('#Option1Div');
      ele.animate({
               opacity    : .75,
               width      : '602px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option2Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option3Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option4Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
      var ele = $('#Option5Div');
      ele.animate({
               opacity    : 0.1,
               width      : '0px'
          }, 5000, function() {
          // Animation complete.
  });
});

Answer 1

You can try this

  $('#Option1 , #Option2 ,#Option3 , #Option4 , #Option5').click(function() {
    var ele = $('#' + this.id + 'Div');
    ele.animate({
        opacity: .75,
        width: '602px'
    }, 5000, function() {
        // Animation complete.
    });

    $('[id^="Option"][id$="Div"]').not(ele).animate({
        opacity: 0.1,
        width: '0px'
    }, 5000, function() {
        // Animation complete.
    });
});