title: Activate and Deactivate CSS transitions on click
body: <p>I have made a simple sidebar navigation menu with 6  elements.
  Here is an example of what I want:</p>
  <ul>
  <li>I click on the 1st element and the menu grows from 2vh to 4vh and
  changes its color (the transition).</li>
  <li>Then I click on the 2nd element
  and the 2nd element grows, while the 1st one shrinks (goes back to it
  original styling).</li>
  <li>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.</li>
  </ul>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function scale() {
    const element = document.getElementById('nav1');
    element.classList.add('navmenu-clicked');
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="navmenu" id="nav1" href="#" onclick="scale()"&gt;menu1&lt;/a&gt;
  &lt;a class="navmenu" id="nav2" href="#" onclick="scale()"&gt;menu2&lt;/a&gt;
  &lt;a class="navmenu" id="nav3" href="#" onclick="scale()"&gt;menu3&lt;/a&gt;
  &lt;a class="navmenu" id="nav4" href="#" onclick="scale()"&gt;menu4&lt;/a&gt;
  &lt;a class="navmenu" id="nav5" href="#" onclick="scale()"&gt;menu5&lt;/a&gt;
  &lt;a class="navmenu" id="nav6" href="#" onclick="scale()"&gt;menu6&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I hope I have explained it well.</p>
  <p>Thank you!</p>