JavaScript : What is it about my code that means the second image only displays for a nano-second
<p>I am using a function, HideFrame to hide/show the left of two iframes.  The function is called by an onclick() event using buttons image1 and image2.</p>

<p>Unfortunately, when I click image1 to hide the left frame, image2 only displays for a nano-second before image1 displays again.</p>

<p>What have I done wrong?</p>

<p>I am just a beginner so go easy on me.</p>

<pre><code>function HideFrame() {
var fr = window.top.document.getElementById ("body_left");
var fs = window.top.document.getElementById ("body_right");
var img1 = document.getElementById("image1");
var img2 = document.getElementById("image2");


if(fr.style.width=="33.5%") {
fr.style.width="0%";
fs.style.width="99.5%";
img1.style.display="none"; 
img2.style.display="inline";


}
else {
fr.style.width="33.5%";
fs.style.width="65.8%";
img1.style.display="inline"; 
img2.style.display="none";

}
}

&lt;input type="image" src="./hideframe.png"  id="image1"
style="display:inline"              
title="Hide/show left panel" onclick="HideFrame()"/&gt;

&lt;input type="image" src="./showframe.png"  id="image2"  style="display:none"
title="Hide/show left panel" onclick="HideFrame()"/&gt;
</code></pre>
