Activate and Deactivate CSS transitions on click

January 10, 2022

I have made a simple sidebar navigation menu with 6 elements.
Here is an example of what I want:

I click on the 1st element and the menu grows from 2vh to 4vh and
changes its color (the transition).
Then I click on the 2nd element
and the 2nd element grows, while the 1st one shrinks (goes back to it
original styling).
And then if I click the 2nd element again, I want
it to go back to its normal styling too. And so on with the other
elements.

function scale() {
  const element = document.getElementById('nav1');
  element.classList.add('navmenu-clicked');
}

.navmenu {
  color: #213362;
  font-size: 2vh;
  position: fixed;
  left: 2%;
  text-decoration: none;
  cursor: default;
  font-family: Arial, Helvetica, sans-serif;
  transition: all 2s;
}

.navmenu-clicked {
  color: red;
  font-size: 4vh;
}

#nav1 {
  top: 30%;
}

#nav2 {
  top: 40%;
}

#nav3 {
  top: 50%;
}

#nav4 {
  top: 60%;
}

#nav5 {
  top: 70%;
}

#nav6 {
  top: 80%;
}

.panel1,
.panel2 {
  height: 100vh;
}

.panel1 {
  background-color: red;
}

.panel2 {
  background-color: blue;
}

<a class="navmenu" id="nav1" href="#" onclick="scale()">menu1</a>
<a class="navmenu" id="nav2" href="#" onclick="scale()">menu2</a>
<a class="navmenu" id="nav3" href="#" onclick="scale()">menu3</a>
<a class="navmenu" id="nav4" href="#" onclick="scale()">menu4</a>
<a class="navmenu" id="nav5" href="#" onclick="scale()">menu5</a>
<a class="navmenu" id="nav6" href="#" onclick="scale()">menu6</a>

I hope I have explained it well.

Thank you!

>Solution :

You could pass this into the onclick so you only add / remove the class of the clicked element and use querySelector to remove the clicked class (if it is not the on currently clicked element) – comments in code explaining what is happening

function scale(element) {
  if (element.classList.contains('navmenu-clicked')) {
    // check if clicked element has already been clicked - if so remove class
    element.classList.remove('navmenu-clicked');
  } else {
    const clicked = document.querySelector('.navmenu-clicked');
    if (clicked) {
      // check if there is a clicked element and remove the class if there is
      clicked.classList.remove('navmenu-clicked');
    }

    // add class to clicked element
    element.classList.add('navmenu-clicked');
  }
}

.navmenu {
  color: #213362;
  font-size: 2vh;
  position: fixed;
  left: 2%;
  text-decoration: none;
  cursor: default;
  font-family: Arial, Helvetica, sans-serif;
  transition: all 2s;
}

.navmenu-clicked {
  color: red;
  font-size: 4vh;
}

#nav1 {
  top: 30%;
}

#nav2 {
  top: 40%;
}

#nav3 {
  top: 50%;
}

#nav4 {
  top: 60%;
}

#nav5 {
  top: 70%;
}

#nav6 {
  top: 80%;
}

.panel1,
.panel2 {
  height: 100vh;
}

.panel1 {
  background-color: red;
}

.panel2 {
  background-color: blue;
}

<a class="navmenu" id="nav1" href="#" onclick="scale(this)">menu1</a>
<a class="navmenu" id="nav2" href="#" onclick="scale(this)">menu2</a>
<a class="navmenu" id="nav3" href="#" onclick="scale(this)">menu3</a>
<a class="navmenu" id="nav4" href="#" onclick="scale(this)">menu4</a>
<a class="navmenu" id="nav5" href="#" onclick="scale(this)">menu5</a>
<a class="navmenu" id="nav6" href="#" onclick="scale(this)">menu6</a>