How to change style of clicked element and current element?

Question

I want to change the class of the clicked element and remove the class from the "current" element. My current code works aswell, but I'm looking for a cleaner / automatic way. So I'm looking for a way to say something like: remove class from all existing elements and add it to the clicked one (this).

My current code :

 document.getElementById('hotelgids-tab-1').addEventListener('click', showForm1); document.getElementById('hotelgids-tab-2').addEventListener('click', showForm2); document.getElementById('hotelgids-tab-3').addEventListener('click', showForm3); document.getElementById('hotelgids-tab-4').addEventListener('click', showForm4); function showForm1(){ this.classList.add('activetab'); document.getElementById('hotelgids-tab-2').classList.remove('activetab'); document.getElementById('hotelgids-tab-3').classList.remove('activetab'); document.getElementById('hotelgids-tab-4').classList.remove('activetab'); } function showForm2(){ this.classList.add('activetab'); document.getElementById('hotelgids-tab-1').classList.remove('activetab'); document.getElementById('hotelgids-tab-3').classList.remove('activetab'); document.getElementById('hotelgids-tab-4').classList.remove('activetab'); } function showForm3(){ this.classList.add('activetab'); document.getElementById('hotelgids-tab-1').classList.remove('activetab'); document.getElementById('hotelgids-tab-2').classList.remove('activetab'); document.getElementById('hotelgids-tab-4').classList.remove('activetab'); } function showForm4(){ this.classList.add('activetab'); document.getElementById('hotelgids-tab-2').classList.remove('activetab'); document.getElementById('hotelgids-tab-3').classList.remove('activetab'); document.getElementById('hotelgids-tab-1').classList.remove('activetab'); }

 <div style="display: flex;"> <div id="hotelgids-tab-1" class="form-tabs-submit activetab width-33">Avro Bode </div> <div id="hotelgids-tab-2" class="form-tabs-submit width-33">Vara Tros Mikro </div> <div id="hotelgids-tab-3" class="form-tabs-submit width-33">Avro Kro NCRV </div> <div id="hotelgids-tab-4" class="form-tabs-submit hotelgids-3">Vara Tros Mikro </div> </div>

Does anyone know how to do this?

Answer 1

You can optimize your code in the following way:

 //Get all the tabs starting id with hotelgids-tab- var all = document.querySelectorAll('[id^=hotelgids-tab-]'); //Loop through them to attch the click event all.forEach(el => el.addEventListener('click', showForm)); function showForm(e){ //Remove class from all all.forEach((el) => el.closest('div').classList.remove('activetab')); //Add the class to the clicked tab e.target.closest('div').classList.add('activetab'); }

 .form-tabs-submit { display: flex; background-color: #F5F5F5; box-sizing: border-box; box-shadow: 0px 1px 3px #0000000F; border-radius:0px; color: #707070; width: 25%; padding: 9px 0px; font-size: 16px; border: none; justify-content: center; text-align: center; cursor: pointer; font-weight: 700; flex-wrap: wrap; } .form-tabs-submit.activetab { display: flex; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000029; border-radius:0px; color: #EC008C; border-bottom: 3px solid #EC008C; width: 25%; padding: 9px 0px; font-size: 16px; }

 <div style="display: flex;"> <div id="hotelgids-tab-1" class="form-tabs-submit activetab width-33">Avro Bode <span class="hotelgids-subtitle">Acties geldig t/m 31 oktober</span> </div> <div id="hotelgids-tab-2" class="form-tabs-submit width-33">Vara Tros Mikro <span class="hotelgids-subtitle">Acties geldig t/m 31 december</span> </div> <div id="hotelgids-tab-3" class="form-tabs-submit width-33">Avro Kro NCRV <span class="hotelgids-subtitle">Acties geldig t/m 31 januari</span> </div> <div id="hotelgids-tab-4" class="form-tabs-submit hotelgids-3">Vara Tros Mikro <span class="hotelgids-subtitle">Acties geldig t/m 31 maart</span> </div> </div>

Answer 2

You code can simplified to just few lines using querySelectorAll and forEach method.

Firstly get all elements by its remove all activeTab classes from the tabs. Add only to the clicked element using Event.Target

let getTabs = document.querySelectorAll('.form-tabs-submit')

getTabs.forEach(function(tab) {
  tab.addEventListener('click', function(e) { //attach event Listener
    getTabs.forEach(function(tab) {
      tab.classList.remove('activetab') //remove from all tabs
    })
    e.target.classList.add('activetab') //add Class to clicked tab only
  })
})

Live Demo:

 let getTabs = document.querySelectorAll('.form-tabs-submit') getTabs.forEach(function(tab) { tab.addEventListener('click', function(e) { getTabs.forEach(function(tab) { tab.classList.remove('activetab') }) e.target.classList.add('activetab') }) })

 .form-tabs-submit { display: flex; background-color: #F5F5F5; box-sizing: border-box; box-shadow: 0px 1px 3px #0000000F; border-radius: 0px; color: #707070; width: 25%; padding: 9px 0px; font-size: 16px; border: none; justify-content: center; text-align: center; cursor: pointer; font-weight: 700; flex-wrap: wrap; } .form-tabs-submit.activetab { display: flex; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000029; border-radius: 0px; color: #EC008C; border-bottom: 3px solid #EC008C; width: 25%; padding: 9px 0px; font-size: 16px; } .form-tabs-submit::first-of-type { border-radius: 4px 0px 0px 0px } .form-tabs-submit::last-of-type { border-radius: 0px 4px 0px 0px; } .container { display: flex; }

 <div class="container"> <div id="hotelgids-tab-1" class="form-tabs-submit activetab width-33">Avro Bode </div> <div id="hotelgids-tab-2" class="form-tabs-submit width-33">Vara Tros Mikro </div> <div id="hotelgids-tab-3" class="form-tabs-submit width-33">Avro Kro NCRV </div> <div id="hotelgids-tab-4" class="form-tabs-submit hotelgids-3">Vara Tros Mikro </div> </div>

Answer 3

This should do the work:

document.getElementsBySelector('.form-tabs-submit').addEventListener('click', activateElement); // Listen to every element by class instead of each one by id

 
function activateElement(currentElement) {
    // Disable all elements
    var allElements = document.querySelectorAll('.form-tabs-submit');
    allElements.forEach(function(element) {
        element.classList.remove('activetab');
    }

    // Activate the current element
    currentElement.classList.add('activetab');
}

Answer 4

 document.getElementById('hotelgids-tab-1').addEventListener('click', changecollorofme); document.getElementById('hotelgids-tab-2').addEventListener('click', changecollorofme); document.getElementById('hotelgids-tab-3').addEventListener('click', changecollorofme); document.getElementById('hotelgids-tab-4').addEventListener('click', changecollorofme); function changecollorofme() { // Disable all elements var allElements = document.querySelectorAll('.form-tabs-submit'); allElements.forEach(function(element) { element.classList.remove('activetab'); } this.classList.add('activetab'); }

 .form-tabs-submit { display: flex; background-color: #F5F5F5; box-sizing: border-box; box-shadow: 0px 1px 3px #0000000F; border-radius: 0px; color: #707070; width: 25%; padding: 9px 0px; font-size: 16px; border: none; justify-content: center; text-align: center; cursor: pointer; font-weight: 700; flex-wrap: wrap; } .form-tabs-submit.activetab { display: flex; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000029; border-radius: 0px; color: #EC008C; border-bottom: 3px solid #EC008C; width: 25%; padding: 9px 0px; font-size: 16px; } .form-tabs-submit::first-of-type { border-radius: 4px 0px 0px 0px } .form-tabs-submit::last-of-type { border-radius: 0px 4px 0px 0px; }

 <div style="display: flex;"> <div id="hotelgids-tab-1" class="form-tabs-submit activetab width-33">Avro Bode <span class="hotelgids-subtitle">Acties geldig t/m 31 oktober</span> </div> <div id="hotelgids-tab-2" class="form-tabs-submit width-33">Vara Tros Mikro <span class="hotelgids-subtitle">Acties geldig t/m 31 december</span> </div> <div id="hotelgids-tab-3" class="form-tabs-submit width-33">Avro Kro NCRV <span class="hotelgids-subtitle">Acties geldig t/m 31 januari</span> </div> <div id="hotelgids-tab-4" class="form-tabs-submit hotelgids-3">Vara Tros Mikro <span class="hotelgids-subtitle">Acties geldig t/m 31 maart</span> </div> </div>

I made it tidy

Answer 5

Try this:

 document.getElementById('hotelgids-tab-1').addEventListener('click', function(){showMe(this)}); document.getElementById('hotelgids-tab-2').addEventListener('click', function(){showMe(this)}); document.getElementById('hotelgids-tab-3').addEventListener('click', function(){showMe(this)}); document.getElementById('hotelgids-tab-4').addEventListener('click', function(){showMe(this)}); function showMe(d) { let thisDiv = d.id; let allItems = document.getElementById("hotelgids").querySelectorAll("div"); allItems.forEach(function(g) { if (g.id == thisDiv) { g.classList.remove("inactivetab"); g.classList.add("activetab"); } else { g.classList.remove("activetab"); g.classList.add("inactivetab"); } }) }

 .form-tabs-submit { display: flex; background-color: #F5F5F5; box-sizing: border-box; box-shadow: 0px 1px 3px #0000000F; border-radius: 0px; color: #707070; width: 25%; padding: 9px 0px; font-size: 16px; border: none; justify-content: center; text-align: center; cursor: pointer; font-weight: 700; flex-wrap: wrap; } .form-tabs-submit.activetab > span{ display: flex; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000029; border-radius: 0px; color: #EC008C; border-bottom: 3px solid #EC008C; width: 25%; padding: 9px 0px; font-size: 16px; } .form-tabs-submit.inactivetab > span{ display: none; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000029; border-radius: 0px; color: #EC008C; border-bottom: 3px solid #EC008C; width: 25%; padding: 9px 0px; font-size: 16px; } .form-tabs-submit:first-of-type { border-radius: 4px 0px 0px 0px } .form-tabs-submit:last-of-type { border-radius: 0px 4px 0px 0px; } span {display:block}

 <div id="hotelgids" style="display:flex;"> <div id="hotelgids-tab-1" class="form-tabs-submit activetab width-33">Avro Bode <span class="hotelgids-subtitle">Acties geldig t/m 31 oktober</span> </div> <div id="hotelgids-tab-2" class="form-tabs-submit inactivetab width-33">Vara Tros Mikro <span class="hotelgids-subtitle">Acties geldig t/m 31 december</span> </div> <div id="hotelgids-tab-3" class="form-tabs-submit inactivetab width-33">Avro Kro NCRV <span class="hotelgids-subtitle">Acties geldig t/m 31 januari</span> </div> <div id="hotelgids-tab-4" class="form-tabs-submit inactivetab hotelgids-3">Vara Tros Mikro <span class="hotelgids-subtitle">Acties geldig t/m 31 maart</span> </div> </div>

I've added an id to the outer div to allow me to loop through the inner ones. I've also added a style called inactivetab which sets display:none

Answer 6

I would try with this solution:

 var maxForms = 4; for(var i=0; i<maxForms; i++) { var elementName = 'hotelgids-tab-' + (i+1); document.getElementById(elementName).addEventListener('click', createShowForm(i)); } function createShowForm(num) { return function showForm() { for(let i=0; i<maxForms; i++) { var elementName = 'hotelgids-tab-' + (i+1); document.getElementById(elementName).classList.remove('activetab'); } this.classList.add('activetab'); } }

 .form-tabs-submit { display: flex; background-color: #F5F5F5; box-sizing: border-box; box-shadow: 0px 1px 3px #0000000F; border-radius:0px; color: #707070; width: 25%; padding: 9px 0px; font-size: 16px; border: none; justify-content: center; text-align: center; cursor: pointer; font-weight: 700; flex-wrap: wrap; } .form-tabs-submit.activetab { display: flex; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 1px 3px #00000029; border-radius:0px; color: #EC008C; border-bottom: 3px solid #EC008C; width: 25%; padding: 9px 0px; font-size: 16px; } .form-tabs-submit::first-of-type { border-radius: 4px 0px 0px 0px } .form-tabs-submit::last-of-type { border-radius: 0px 4px 0px 0px; }

 <div style="display: flex;"> <div id="hotelgids-tab-1" class="form-tabs-submit activetab width-33">Avro Bode <span class="hotelgids-subtitle">Acties geldig t/m 31 oktober</span> </div> <div id="hotelgids-tab-2" class="form-tabs-submit width-33">Vara Tros Mikro <span class="hotelgids-subtitle">Acties geldig t/m 31 december</span> </div> <div id="hotelgids-tab-3" class="form-tabs-submit width-33">Avro Kro NCRV <span class="hotelgids-subtitle">Acties geldig t/m 31 januari</span> </div> <div id="hotelgids-tab-4" class="form-tabs-submit hotelgids-3">Vara Tros Mikro <span class="hotelgids-subtitle">Acties geldig t/m 31 maart</span> </div> </div>

The maxForms variable tells how many forms you handle in the grid.