title: jQuery classList.toggle not working properly
body: <p>I'm new to javascript and i'm trying to get 2 functions to work when click on a button;
   first function is to transform the menu button to an "X" (typical 3 lines menu icon)</p>
  
  <p>the second function is, <code>TranslateX</code> the <code>#mobileMenu</code> so it enters the screen from the left.</p>
  
  <p>The first function works great, but the translate for the menu is not doing anything, i check the developers tools and the class is being applied but the menu is not translating.</p>
  
  <p>The Code.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="mobileNavContainer"&gt;
      &lt;a class="mobileNavLogo" href=""&gt;&lt;img src="assets/img/Logo40x40.png" alt=""/&gt;&lt;/a&gt;
      &lt;div id="mobile_button"&gt;
         &lt;div class="mobile_button_lines1"&gt;&lt;/div&gt;
         &lt;div class="mobile_button_lines2"&gt;&lt;/div&gt;
         &lt;div class="mobile_button_lines3"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="mobileMenu"&gt;
         &lt;ul id="mobileLinks"&gt;
            &lt;li&gt;&lt;a href=""&gt;WEB&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;GRAFICO&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;FOTOGRAFIA&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;PORTAFOLIO&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;NOSOTROS&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;CONTACTO&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
         &lt;ul id="mobileSocialIcons"&gt;
            &lt;li&gt;&lt;a href=""&gt;&lt;img src="assets/img/nav-facebook-icon.png" alt=""/&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;&lt;img src="assets/img/nav-twitter-icon.png" alt=""/&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;&lt;img src="assets/img/nav-instagram-icon.png" alt=""/&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#mobileMenu{
    display: block;
    position: relative;
    background-color: rgb(230, 231, 232);
    width: 170px;
    transition: all 0.3s ease-in-out;
    transform: translateX(-100%);
  }
  
  .showMenu #mobileMenu{
    display: block;
    transform: translateX(0);
  }
  
  #mobile_button{
    position: fixed;
    display: block;
    width: 50px;
    height: 60px;
    float: right;
    right: 5px;
    cursor: pointer;
    z-index: 1;
  }
  
  .mobile_button_lines1{
    max-width: 70%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    height: 2px;
    background-color: rgb(88, 88, 91);
    margin-top: 18px;
    border-radius: 2px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  
  .mobile_button_lines2, .mobile_button_lines3{
    max-width: 70%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    height: 2px;
    background-color: rgb(88, 88, 91);
    margin-top: 9px;
    border-radius: 2px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  
  .show .mobile_button_lines1 {
    -webkit-transform: rotate(45deg) translate(11px, 5px);
    transform: rotate(45deg) translate(11px, 5px);
  }
  
  .show .mobile_button_lines2 {
    opacity: 0;
  }
  
  .show .mobile_button_lines3 {
    -webkit-transform: rotate(-45deg) translate(10px, -5px);
    transform: rotate(-45deg) translate(10px, -5px);
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var mobileButtonTransform = document.getElementById('mobile_button');
  mobileButtonTransform.addEventListener('click',function(){
    mobileButtonTransform.classList.toggle('show');
  })
  
  var mobileMenuShow = document.getElementById('mobileMenu');
  mobileButtonTransform.addEventListener('click',function(){
    mobileMenuShow.classList.toggle('showMenu');
  })
  </code></pre>
  
  <p>I don't know why the <code>translateX</code> is not working on click, the first function works perfect and on the developers tools of Chrome i can see <code>.showMenu</code> is being applied to <code>#mobileMenu</code>, but nothing happens,i get no error on the console.</p>