Activate and Deactivate CSS transitions on click-CodePudding

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  id="nav1" href="#" onclick="scale()">menu1</a>
<a  id="nav2" href="#" onclick="scale()">menu2</a>
<a  id="nav3" href="#" onclick="scale()">menu3</a>
<a  id="nav4" href="#" onclick="scale()">menu4</a>
<a  id="nav5" href="#" onclick="scale()">menu5</a>
<a  id="nav6" href="#" onclick="scale()">menu6</a>

I hope I have explained it well.

Thank you!

CodePudding user response：

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Document</title>
</head>

<body>
  <a  id="nav1" href="#">menu1</a>
  <a  id="nav2" href="#">menu2</a>
  <a  id="nav3" href="#">menu3</a>
  <a  id="nav4" href="#">menu4</a>
  <a  id="nav5" href="#">menu5</a>
  <a  id="nav6" href="#">menu6</a>
  <script src="app.js"></script>
</body>

</html>

CodePudding user response：

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  id="nav1" href="#" onclick="scale(this)">menu1</a>
<a  id="nav2" href="#" onclick="scale(this)">menu2</a>
<a  id="nav3" href="#" onclick="scale(this)">menu3</a>
<a  id="nav4" href="#" onclick="scale(this)">menu4</a>
<a  id="nav5" href="#" onclick="scale(this)">menu5</a>
<a  id="nav6" href="#" onclick="scale(this)">menu6</a>