-1

I'm new to Javascript and jQuery and while I'm excited that I have a better understanding, I just know I'm taking the round about - very long way. The idea here is for 4 blocks with 4 products, that by clicking on one will expand the chosen block and hide the rest. Please see my code below. I'm assuming there is simpler way or more concise at least, but let me know if this is as good at it gets.

  $(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;
      });
  });    
2
  • 5
    I think this should be raised in codereview.stackexchange.com Mar 26, 2014 at 18:14
  • This question appears to be off-topic because it is better suited to codereview.stackexchange.com.
    – Andy
    Mar 26, 2014 at 18:16

1 Answer 1

0

you mentioned

The idea here is for 4 blocks with 4 products, that by clicking on one will expand the chosen block and hide the rest.

the functionality that you are seeking seems very similar to Tab Control in JQuery,could you give it a try and let us know if it suits your purpose?
if you want your code to be improved could you please post your question in codereview.stackexchange.com as the comments suggest?

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.