有什么简化的方法吗

我是Javascript和jQuery的新手，虽然我很高兴我有了更好的理解，但我只知道我正在绕圈子-很长的路要走。这里的想法是4块4个产品，通过点击一个将展开所选的块和隐藏其余的。请参阅下面我的代码。我假设有更简单的方法，或者至少更简洁，但请告诉我这是不是最好的方法。

  $(function () {
      var state = true;
      $("#toggler").click(function () {
          if (state) {
              $("#effect2").hide({
                  duration: 1000
              });
              $("#effect3").hide({
                  duration: 1000
              });
              $("#effect4").hide({
                  duration: 1000
              });
              $("#effect2").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160,
              }, 1000);
              $("#effect3").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160,
              }, 1000);
              $("#effect4").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160,
              }, 1000);
              $("#effect").animate({
                  backgroundColor: "#D1F4FF",
                  color: "#fff",
                  width: 700,
              }, 1000);
          } else {
              $("#effect2").show({
                  duration: 1000
              });
              $("#effect3").show({
                  duration: 1000
              });
              $("#effect4").show({
                  duration: 1000
              });
              $("#effect").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
          }
          state = !state;
      });
      var state2 = true;
      $("#toggler2").click(function () {
          if (state2) {
              $("#effect").hide({
                  duration: 1000
              });
              $("#effect3").hide({
                  duration: 1000
              });
              $("#effect4").hide({
                  duration: 1000
              });
              $("#effect").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect3").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect4").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);

              $("#effect2").animate({
                  backgroundColor: "#aa0000",
                  color: "#fff",
                  width: 700
              }, 1000);
          } else {
              $("#effect").show({
                  duration: 1000
              });
              $("#effect3").show({
                  duration: 1000
              });
              $("#effect4").show({
                  duration: 1000
              });
              $("#effect2").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
          }
          state2 = !state2;
      });
 var state3 = true;
      $("#toggler3").click(function () {
          if (state3) {
              $("#effect").hide({
                  duration: 1000
              });
              $("#effect2").hide({
                  duration: 1000
              });
              $("#effect4").hide({
                  duration: 1000
              });
              $("#effect").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect2").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect4").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect3").animate({
                  backgroundColor: "#aa0000",
                  color: "#fff",
                  width: 700
              }, 1000);
          } else {
              $("#effect").show({
                  duration: 1000
              });
              $("#effect2").show({
                  duration: 1000
              });
              $("#effect4").show({
                  duration: 1000
              });
              $("#effect3").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
          }
          state3 = !state3;
      });
      var state4 = true;
      $("#toggler4").click(function () {
          if (state4) {
              $("#effect").hide({
                  duration: 1000
              });
              $("#effect2").hide({
                  duration: 1000
              });
              $("#effect3").hide({
                  duration: 1000
              });
              $("#effect").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect2").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect3").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
              $("#effect4").animate({
                  backgroundColor: "#aa0000",
                  color: "#fff",
                  width: 700
              }, 1000);
          } else {
              $("#effect").show({
                  duration: 1000
              });
              $("#effect2").show({
                  duration: 1000
              });
              $("#effect3").show({
                  duration: 1000
              });
              $("#effect4").animate({
                  backgroundColor: "#fff",
                  color: "#000",
                  width: 160
              }, 1000);
          }
          state4 = !state4;
      });
  });