title: Javascript - Overriding styles previously declared in another function
body: <p>Ok, this is my HTML</p>
  
  <pre><code>&lt;div id="plus" style="margin-left: 10px; margin-top: 303px;"&gt;
        &lt;div id="plus-back"&gt; &lt;/div&gt;
        &lt;div id="plus-ex"&gt; X &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>NOTE: the <code>#plus</code> element's inline styles was declared previuously by another script</p>
  
  <p>And this is my JS</p>
  
  <pre><code>document.getElementById("plus").onclick = showNav 
  document.getElementById("plus-ex").onclick = hideNav
  
  function showNav(){
      this.style.width="200px"
      this.style.height="200px"
      document.getElementById("plus-ex").style.display="block"
  }
  function hideNav(){
      document.getElementById("plus").style.width="48px"
      document.getElementById("plus").style.height="48px"
  }
  </code></pre>
  
  <p>Well.. this is what i have. The goal is simple, when you click <code>#plus</code>, this is expanded to show some content, and appears a "X" that is inside <code>#plus-ex</code>, and when you click that "X", <code>#plus</code> go back to the start (that is a div with 48px of height and width thanks to stylesheet). The problem with this, is that <code>hideNav()</code> is not doing a good work. When you click <code>#plus</code>, <code>showNav()</code> function is fired successfully, but after that, when you click the "X" and hideNav() is fired (successfully too), that should apply the initial style, but does anything. I have tested applying another CSS propieties like <code>background-color</code> and works OK, but not with <code>width</code> and <code>height</code>. </p>
  
  <p>I think that the problem is that i can't override the styles applied by <code>showNav()</code></p>
  
  <p>What should i do?</p>