title: How to smoothly move the background when toggle between multiple options in Vanilla JS
body: <p>I have a navigation option. One of the option will always be active by default and will have a background color like this:</p>
  
  <p><img src="https://i.stack.imgur.com/4O5EA.png" alt="enter image description here"></p>
  
  <p>When I click on any other option, the background color should animate smoothly and move from previous option to the newly clicked option. I tried to search it but couldn't figure out the correct name of this effect. It should act like a switch but I want to build it for custom use with text written on the handlebar, which isn't possible in switch. </p>
  
  <p>How do I achieve it using Vanilla JS.
  Here is my JS fiddle link for what I have done: <a href="https://jsfiddle.net/1ex3y94g/1/" rel="nofollow noreferrer">https://jsfiddle.net/1ex3y94g/1/</a></p>
  
  <p>Code I use to toggle the background color:</p>
  
  <pre><code>function change(id1,id2) {
    document.getElementById(id2).style.background="lightgreen";
    document.getElementById(id1).style.background="red";
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="bar1" id="bar1" onclick="change('bar1','bar2')"&gt;
      Option1
    &lt;/div&gt;
    &lt;div class="bar2" id="bar2" onclick="change('bar2','bar1')"&gt;
      Option2
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>