Activate and Deactivate CSS transitions on click

Question

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

menu1
menu2
menu3
menu4
menu5
menu6

I hope I have explained it well.

Thank you!

user_1790982 · Answer

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

menu1
menu2
menu3
menu4
menu5
menu6

user_9946874 · Answer

If I understood correctly you want to highlight only one link at a time, and toggle active link style on click as well. See modified snippet below and my comments in JS snippet. Please note I used event delegation to handle click event which is a standard way to handle such scenarios.

let activeLink = null;
document.body.addEventListener("click", e => {
  // First reset class of current active link (if it's not null)
  if (activeLink) {
    activeLink.classList.remove("navmenu-clicked");
  }

  const link = e.target;
  if (link === activeLink) {
    // Clicked on an active link 
    activeLink = null;
  } else {
    activeLink = link;
    activeLink.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;
}





  
  
  
  
  Document



  menu1
  menu2
  menu3
  menu4
  menu5
  menu6

Activate and Deactivate CSS transitions on click

2 Answers