CODEWITHSUNDEEP
javascript
Sybrentjuh
Sybrentjuh

Reputation: 287

How to change style of clicked element and current element?

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?

Upvotes: 1

Views: 129

Answers (6)

Alpha Wolf Gamer
Alpha Wolf Gamer

Reputation: 327

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

Upvotes: 0

R. Pinheiro
R. Pinheiro

Reputation: 1

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.

Upvotes: 0

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 3

ATD
ATD

Reputation: 1364

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

Upvotes: 0

Always Helping
Always Helping

Reputation: 14570

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>

Upvotes: 2

Bamak
Bamak

Reputation: 184

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');
}

Upvotes: 1

Related Questions