Searching for coding help in Processing3

Processing Coding Questions
12

Github Sketch Processing

Slightly better Version. Only Problem now is, i have no clue how to declare the other side of my toggle button.
If someone doesnt want to open the link here is " main " and “togglebutton”:

toggleButton OnOffTest;
tabButton tabButtonTest;
tabButton2 tabButtonTest2;
PFont myFontUI;
PFont myFont;
PFont myFont1;
PFont myFont2;
PFont myFont3;
PFont myFont4;
PImage myImage1;
PImage myImage2;
PImage myImage3;
PImage myImage4;
PImage myImage5;
PImage myImage6;
PImage myImage7;
PImage myImage8;
PImage myImage9;
PImage myImage10;
PImage myImage11;
PImage myImage12;






void setup() {
  size(1024, 768);
  OnOffTest = new toggleButton(100, 130);
  tabButtonTest = new tabButton(30, 250, 4);
  tabButtonTest2 = new tabButton2(30, 350, 4);
  myFontUI = createFont("lmmono10-regular.otf", 32);
  myFont = createFont("Montserrat-Regular.ttf", 25);
  myFont1 = createFont("Blacksword.otf", 25);
  myFont2 = createFont("Raleway-ExtraLight.ttf", 25);
  myFont3 = createFont("riesling.ttf", 40);
  myFont4 = createFont("Montserrat-Bold.ttf", 40);
  myImage1 = loadImage("Lederweiß.png");
  myImage2 = loadImage("Stoffweiß.png");
  myImage3 = loadImage("verlauf-bg.png");
  myImage4 = loadImage("Stoffgrün.png");
  myImage5 = loadImage("Stoffblau.png");
  myImage6 = loadImage("Stoffblauohne.png");
  myImage7 = loadImage("Stoffblauholz.png");
  myImage8 = loadImage("Stoffgrünohne.png");
  myImage9 = loadImage("Stoffgrünholz.png");
  myImage10 = loadImage("Stoffweißohne.png");
  myImage11 = loadImage("Stoffweißholz.png");
  textFont(myFontUI);
}

void draw() {
  colorMode(RGB, 255, 255, 255);
  background(myImage3);  
  noTint();
  colorMode(HSB, 0, 0, 0);
  fill(0,0,0);
  textFont(myFontUI);
  text("Stoff", 15, 150);
  text("Leder", 165, 150);
  text("Farbvariation", 20, 230);
  text("Ausstattung", 35, 330);
  textFont(myFont4);
  text("Couchkonfigurator", 270, 40);
  
 

  colorMode(RGB, 0, 0, 0);
  fill(0);
 
  
  
  
  
  //zeichen der Interfaceelemente
  OnOffTest.draw();
  tabButtonTest.draw();
  tabButtonTest2.draw();
  
  // "OnOffTest" bestimmt ob leder/Stoff
  noStroke();
  if (OnOffTest.myStateActive) {
    image(myImage2,280, 110);
  } else {
    image(myImage1,280, 110);
  }
    


  // "tabButtonTest" bestimmt 3 farbvarianten
  if (OnOffTest.myStateActive) {
  if (tabButtonTest.activeTab == 0) {
    image(myImage2, 280, 110);
  } else if (tabButtonTest.activeTab == 1) {
    image(myImage4, 280, 110);
  } else if (tabButtonTest.activeTab == 2) {
      image(myImage5, 280, 110);
  }
  }
  
   // "tabButtonTest2" bestimmt 3 farbvarianten
  if (OnOffTest.myStateActive) {
    if (tabButtonTest.activeTab == 0) {
  if (tabButtonTest2.activeTab == 0) {
    image(myImage5, 280, 110);
  } 
  else if (tabButtonTest2.activeTab == 1) {
  image(myImage7, 280, 110);
  } 
  else if (tabButtonTest2.activeTab == 2) {
  image(myImage6, 280, 110);
  }
  }
  }
  
  if (OnOffTest.myStateActive) {
    if (tabButtonTest.activeTab == 1) {
  if (tabButtonTest2.activeTab == 0) {
    image(myImage4, 280, 110);
  } 
  else if (tabButtonTest2.activeTab == 1) {
  image(myImage9, 280, 110);
  } 
  else if (tabButtonTest2.activeTab == 2) {
  image(myImage8, 280, 110);
  }
  }
  }
  
    if (OnOffTest.myStateActive) {
    if (tabButtonTest.activeTab == 2) {
  if (tabButtonTest2.activeTab == 0) {
    image(myImage2, 280, 110);
  } 
  else if (tabButtonTest2.activeTab == 1) {
  image(myImage11, 280, 110);
  } 
  else if (tabButtonTest2.activeTab == 2) {
  image(myImage10, 280, 110);
  }
  }
  }
  
 
  
  //der in "textFieldTest" geschriebene Text wird abgebildet
  
}

void mousePressed() {
  OnOffTest.mousePressed();
  tabButtonTest.mousePressed();
  tabButtonTest2.mousePressed();
}

void mouseDragged() {
}

void mouseReleased() {
}

void keyPressed() {
}



boolean insideRect(int xPos, int yPos, int targetXPos, int targetYPos, int targetWidth, int targetHeight) {
  if (xPos > targetXPos && xPos < targetXPos + targetWidth && yPos > targetYPos && yPos < targetYPos + targetHeight) {
    return true;
  }
  return false;
}

class tabButton2 {
  int myXPos = 0;
  int myYPos = 0;
  int myWidth = 202;
  int myHeight = 30;
  int numOfTabs;
  color backgroundColor = color(30, 30, 30);
  color inactiveColor = color(150, 150, 150);
  color forgroundColor = color(200, 200, 200);
  int activeTab = 0;

  tabButton2(int xPos, int yPos, int nTabs) {
    myXPos = xPos;
    myYPos = yPos;
    numOfTabs = 3;
  }

  void draw() {
    pushMatrix();
    translate(myXPos, myYPos);
    noStroke();
    fill(backgroundColor);
    rect(0, 0, myWidth, myHeight, 8);
    fill(forgroundColor);
    for (int i = 0; i < numOfTabs; i++) {
      if (i == activeTab) {
        fill(forgroundColor);
      } else {
        fill(inactiveColor);
      }
      if (i == 0) {
        rect(0+2 + i * (myWidth-2)/numOfTabs, 0+2, (myWidth-4)/numOfTabs-2, myHeight-4, 5, 0, 0, 5);
      } else if (i == numOfTabs-1) {
        rect(0+2 + i * (myWidth-2)/numOfTabs, 0+2, (myWidth-4)/numOfTabs-2, myHeight-4, 0, 5, 5, 0);
      } else {
        rect(0+2 + i * (myWidth-2)/numOfTabs, 0+2, (myWidth-4)/numOfTabs-2, myHeight-4);
      }
    }
    popMatrix();
    
  }


  void mousePressed() {
    for (int i = 0; i < numOfTabs; i++) {
      if (insideRect(mouseX, mouseY, myXPos+2 + i * (myWidth-2)/numOfTabs, myYPos+2, (myWidth-4)/numOfTabs-2, myHeight-4)) {
        activeTab = i;
      }
    }
  }
}

Have really not to much knowledge about this if else thing.
To get one side going of the button i wrote:
if (OnOffTest.myStateActive) {
Whats the opposite. In the first section i get the other side running, with the “2 side options”

 // "OnOffTest" bestimmt ob leder/Stoff
  noStroke();
  if (OnOffTest.myStateActive) {
    image(myImage2,280, 110);
  } else {
    image(myImage1,280, 110);
  }

That are the two sides, Leather and fabric. Fabric side works fine but i dont know how to declare the togglebutton.
-If the toggle Button is on the “Leather” side, only get the option for the leather pics and fabric hides.