Javascript - Overriding styles previously declared in another function

Javascript - Overriding styles previously declared in another function

Ok, this is my HTML
<div id="plus" style="margin-left: 10px; margin-top: 303px;">
<div id="plus-back"> </div>
<div id="plus-ex"> X </div>
</div>
NOTE: the #plus element's inline styles was declared previuously by
another script
And this is my JS
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"
}
Well.. this is what i have. The goal is simple, when you click #plus, this
is expanded to show some content, and appears a "X" that is inside
#plus-ex, and when you click that "X", #plus go back to the start (that is
a div with 48px of height and width thanks to stylesheet). The problem
with this, is that hideNav() is not doing a good work. When you click
#plus, showNav() 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 background-color and works OK, but not with width and
height.
I think that the problem is that i can't override the styles applied by
showNav()
What should i do?