Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

239
Views
JavaScript switch divs by class list add,remove / toggle? how I can write better code?

I am a beginning programmer and I would like to ask how can I improve this code? I know it's bad because there are a lot of repetitions and I would like to know how I can make it effective?

Thank you for any advice :)

 const simple = document.querySelector(".simple");
const speedy = document.querySelector(".speedy");
const easy = document.querySelector(".easy");

const illustration1Img = document.querySelector(".illustration-1-img");
const illustration2Img = document.querySelector(".illustration-2-img");
const illustration3Img = document.querySelector(".illustration-3-img");

const illustration1 = document.querySelector(".illustration-1");
const illustration2 = document.querySelector(".illustration-2");
const illustration3 = document.querySelector(".illustration-3");


simple.addEventListener("click", function(){ 
    illustration1Img.classList.remove("hidden");
    illustration2Img.classList.add("hidden");
    illustration3Img.classList.add("hidden");

    illustration1.classList.remove("hidden");
    illustration2.classList.add("hidden");
    illustration3.classList.add("hidden");
});

speedy.addEventListener("click", function(){ 
    illustration1Img.classList.add("hidden");
    illustration2Img.classList.remove("hidden");
    illustration3Img.classList.add("hidden");

    illustration1.classList.add("hidden");
    illustration2.classList.remove("hidden");
    illustration3.classList.add("hidden");
});

easy.addEventListener("click", function(){ 
    illustration1Img.classList.add("hidden");
    illustration2Img.classList.add("hidden");
    illustration3Img.classList.remove("hidden");

    illustration1.classList.add("hidden");
    illustration2.classList.add("hidden");
    illustration3.classList.remove("hidden");
});
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!