title: Show or hide an element using javascript in all browsers
body: <p>Here is the html code..</p>
  
  <pre><code>&lt;select id="dept" name="dept" style="float: left;"&gt;
          &lt;option value="eee" onclick="toggleDisplay('dept_input_div', 0)"&gt;EEE&lt;/option&gt;
          &lt;option value="ece" onclick="toggleDisplay('dept_input_div', 0)"&gt;ECE&lt;/option&gt;
          &lt;option value="eie" onclick="toggleDisplay('dept_input_div', 0)"&gt;EIE&lt;/option&gt;
          &lt;option value="cse" onclick="toggleDisplay('dept_input_div', 0)"&gt;CSE&lt;/option&gt;
          &lt;option value="it" onclick="toggleDisplay('dept_input_div', 0)"&gt;IT&lt;/option&gt;
          &lt;option value="mechanical" onclick="toggleDisplay('dept_input_div', 0)"&gt;Mechanical&lt;/option&gt;
          &lt;option value="civil" onclick="toggleDisplay('dept_input_div', 0)"&gt;Civil&lt;/option&gt;
          &lt;option value="mechatronics" onclick="toggleDisplay('dept_input_div', 0)"&gt;Mechatronics&lt;/option&gt;
          &lt;option value="biotech" onclick="toggleDisplay('dept_input_div', 0)"&gt;Bio-tech&lt;/option&gt;
          &lt;option value="automobile" onclick="toggleDisplay('dept_input_div', 0)"&gt;Automobile&lt;/option&gt;
          &lt;option value="chemical" onclick="toggleDisplay('dept_input_div', 0)"&gt;Chemical&lt;/option&gt;
          &lt;option value="aeronautical" onclick="toggleDisplay('dept_input_div', 0)"&gt;Aeronautical&lt;/option&gt;
          &lt;option value="architecture" onclick="toggleDisplay('dept_input_div', 0)"&gt;Architecture&lt;/option&gt;
          &lt;option value="others" onclick="javascript:toggleDisplay('dept_input_div', 1);"&gt;Others..&lt;/option&gt;
        &lt;/select&gt;
        &lt;div id="dept_input_div" style="display: none"&gt;
        &lt;input class="inputbox" name="dept-input" type="text" id="dept-inputbox" /&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Here is the javascript code..</p>
  
  <pre><code>    function toggleDisplay(id, displayvalue)
  {
      if ( displayvalue == 1 ) {
          document.getElementById(id).style.display = 'block';
      } else if ( displayvalue == 0 ) {
          document.getElementById(id).style.display = 'none';
      }
  }
  </code></pre>
  
  <p>The above code is working fine in firefox and ie (compatibility view turned off) but in chrome and ie(compatibility turned on).</p>
  
  <p>What am i doing wrong? Is there a proper way of doing this that works in all browsers?</p>