Toggling classes on many elements when a button is tapped

Question

I have this very easy functionality to find, toggle and remove classes from my html elements. The thing is that I find my self repeating the same code with just different name classes. I basically wrote the same method 9 times. I know that is you keep writing the same thing over and over again there is a more efficient way to do it. So I just wanted to see how could I make my code more effective.

I attached the piece of my code where i find myself repeating a lot. I have a tried a few ideas, but I only save like 2 lines of code.

// SECTION 5

$("body").on("tap", ".state1, .display-state1", function showState1() {
          $(".show-overlay").toggleClass("display-state1");
          $(".show-overlay").removeClass("display-state2");
          $(".show-overlay").removeClass("display-state3");
    });

$("body").on("tap", ".state2, .display-state2", function showState2() {
          $(".show-overlay").toggleClass("display-state2");
          $(".show-overlay").removeClass("display-state1");
          $(".show-overlay").removeClass("display-state3");
    });

$("body").on("tap", ".state3, .display-state3", function showState3() {
          $(".show-overlay").toggleClass("display-state3");
          $(".show-overlay").removeClass("display-state1");
          $(".show-overlay").removeClass("display-state2");
    });

// SECTION 8

$("body").on("tap", ".state-1, .display-state-1", function showSection8State1() {
          $(".show-overlay-big").toggleClass("display-state-1");
          $(".state-1-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-2, .display-state-2", function showSection8State2() {
          $(".show-overlay-big").toggleClass("display-state-2");
          $(".state-2-pdfs").children().toggleClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-1");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-3, .display-state-3", function showSection8State3() {
          $(".show-overlay-big").toggleClass("display-state-3");
          $(".state-3-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-1");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-4, .display-state-4", function showSection8State4() {
          $(".show-overlay-big").toggleClass("display-state-4");
          $(".state-4-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-1");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-5, .display-state-5", function showSection8State5() {
          $(".show-overlay-big").toggleClass("display-state-5");
          $(".state-5-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-1");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-6, .display-state-6", function showSection8State6() {
          $(".show-overlay-big").toggleClass("display-state-6");
          $(".state-6-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-1");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-7, .display-state-7", function showSection8State7() {
          $(".show-overlay-big").toggleClass("display-state-7");
          $(".state-7-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-1");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-8, .display-state-8", function showSection8State8() {
          $(".show-overlay-big").toggleClass("display-state-8");
          $(".state-8-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".state-9-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-1");
          $(".show-overlay-big").removeClass("display-state-9");
    });

$("body").on("tap", ".state-9, .display-state-9", function showSection8State9() {
          $(".show-overlay-big").toggleClass("display-state-9");
          $(".state-9-pdfs").children().toggleClass("display-pdfs");
          $(".state-2-pdfs").children().removeClass("display-pdfs");
          $(".state-3-pdfs").children().removeClass("display-pdfs");
          $(".state-4-pdfs").children().removeClass("display-pdfs");
          $(".state-5-pdfs").children().removeClass("display-pdfs");
          $(".state-6-pdfs").children().removeClass("display-pdfs");
          $(".state-7-pdfs").children().removeClass("display-pdfs");
          $(".state-8-pdfs").children().removeClass("display-pdfs");
          $(".state-1-pdfs").children().removeClass("display-pdfs");
          $(".show-overlay-big").removeClass("display-state-2");
          $(".show-overlay-big").removeClass("display-state-3");
          $(".show-overlay-big").removeClass("display-state-4");
          $(".show-overlay-big").removeClass("display-state-5");
          $(".show-overlay-big").removeClass("display-state-6");
          $(".show-overlay-big").removeClass("display-state-7");
          $(".show-overlay-big").removeClass("display-state-8");
          $(".show-overlay-big").removeClass("display-state-1");
    });

Answer 1

In sections like this:

      $(".show-overlay-big").removeClass("display-state-1");
      $(".show-overlay-big").removeClass("display-state-3");
      $(".show-overlay-big").removeClass("display-state-4");
      $(".show-overlay-big").removeClass("display-state-5");
      $(".show-overlay-big").removeClass("display-state-6");
      $(".show-overlay-big").removeClass("display-state-7");
      $(".show-overlay-big").removeClass("display-state-8");
      $(".show-overlay-big").removeClass("display-state-9");

Where you repeat the same exact method with different parameters on the same object AND the changing parameters only change by a single number, you can just concatenate that number to the end of the parameter name.

In the case of the above code, that would be: "display-state-" + number

This is shown below with a loop for the changing number:

for(var i = 1; i <= 9; i++) {
    $(".show-overlay-big").removeClass("display-state-" + i);
}

This same idea can be used for the rest of your code, even in spots where, instead of the parameter changing, the object that is being acted upon is changing.

And, if you come to a spot where the changing parameter/object name is not only changing by a single number, you can consider using an array to hold the different parameters/object names.

Then, you can just easily iterate over the array and call the method with each element of the array.

Answer 2

It's hard to tell what your intention is, when you have shown us just the jQuery code without the HTML or CSS to accompany it. It seems like you are trying to store global state in your document by setting classes locally on each individual element. That is the root cause of all that complexity.

I recommend that you store global state by setting the classes on a suitable ancestor of all the affected elements instead. Since you haven't shown the HTML and CSS, I can't tailor a response to your situation. However, you can see a demonstration of the technique in my answer to iPhone notes application replica using HTML/CSS.