title: changing elements height property in javascript
body: <p>I have an embedded webpage on my website that looks like this: </p>
  
  <pre><code>&lt;embed src=http://www.green-panda.com width="100%" height="250" style="overflow:hidden;"  id="browser"&gt;&lt;/embed&gt;
  </code></pre>
  
  <p>And then a button below it that is supposed to be "hiding" and "showing" or adjusting the height from 250 to 0 and then back to 250 each time you click it: </p>
  
  <pre><code>&lt;button class="btn" id="hide" data-original-title="hide" onclick="hideBrowser()"&gt;&lt;i class="icon-minus"&gt;&lt;/i&gt;&lt;/button&gt;
  </code></pre>
  
  <p>I have created this script below and it works just dandy for adjusting the height to zero but for some reason it won't do the "else" statement and bring the browser back. Does the height property disappear when it's set to 0? What am I missing so the button can toggle the height of the embedded webpage from 250 to 0 and then from 0 to 250? I'm sure it'something simple (i'm not that great at javascript)</p>
  
  <pre><code>function hideBrowser()
      {
          if (document.getElementById("browser").height="250") 
          {
              document.getElementById("browser").height="0";
              document.getElementById("hide").innerHTML="&lt;i class='icon-plus'&gt;&lt;/i&gt;";
          } 
          else
          {
              document.getElementById("browser").height="249";
              document.getElementById("hide").innerHTML="&lt;i class='icon-minus'&gt;&lt;/i&gt;";
          };
      }
  </code></pre>