title: How to toggle a single element and make other elements react
body: <p>I have this:</p>
  
  <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 myFunction(x) {
    x.classList.toggle('change');
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,
  hmtl {
    background- color: black;
  }
  
  .text {
    color: Black;
  }
  
  a {
    text-decoration: none;
  }
  
  .container {
    display: inline-block;
    cursor: pointer;
  }
  
  .bar1,
  .bar2,
  .bar3 {
    width: 39px;
    height: 30px;
    border-radius: 90px;
    background-color: blue;
    margin: 20px 0;
    transition: 0.4s;
  }
  
  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-345deg) translate(-9px, 6px);
    height: 100px;
    position: relative;
    top: -100px;
    width: 200px;
    background- color: blue;
    border-radius: 100px;
  }
  
  .change .bar2 {
    transform: rotate(3000deg);
    width: 100px;
    height: 200px;
    position: relative;
    left: 200px;
    background-color: blue;
    top: -100px;
    border- radius: 100px;
  }
  
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: blue;
    width: 200px;
    height: 200px;
    position: relative;
    left: 100px;
    bottom: 200px;
    opacity: 1! important;
    border-radius: 100px;
  }
  
  .change .text {
    color: black;
    font-size: 10px;
    position: relative;
    top: -200px;
    background-color: green;
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a id="mobile-nav" href="#"&gt;
    &lt;div class="container" onclick="myFunction(this)"&gt;
      &lt;div class="bar1"&gt;
        &lt;p class="details"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="bar2"&gt;&lt;/div&gt;
      &lt;div class="bar3"&gt;&lt;/div&gt;
      &lt;div class="text"&gt;Hello&lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to be able to toggle just the first element <code>.bar1</code> and have the other two react in the way specified. I don't want user to be able to toggle bottom two elements <code>.bar2</code> <code>.bar3</code> but I still want them to react when <code>.bar1</code> is pressed.</p>
  
  <p>I tried moving the <code>a</code> attribute, but that didn't work as I was able to toggle the <code>.bar1</code> but <code>.bar2</code> and <code>.bar3</code> didn't react. They are in a container so do I need separate containers and if so how do I link them? At the moment you can only toggle all three at once.</p>