Hi all, I have a script I am using (successfully in Firefox and Chrome) to show hidden divs on a page when the user clicks a button. Essentially it is adding new textarea's to a form if they need to add more options.

As I mentioned, the script works perfectly and completely as intended in FF and chrome, but if a user with (POS) Internet Explorer tries to click the button to add more boxes, nothing happens and they're unable to do anything.

Here is the script and below that is a sample of the HTML button I am using to call it.

SCRIPT:
Code:
<script type="text/javascript" charset="utf-8">
    (function(){
      var tabs =document.getElementById('tabs');
      var nav = tabs.getElementsByTagName('input');
     
      /*
      * Hide all tabs
      */
      function hideTabs(){
        var tab = tabs.getElementsByTagName('div');
        for(i in tab){
          if(tab[i].className == 'tab'){
            tab[i].className = tab[i].className + ' hide';
          }
        }
      }
     
      /*
      * Show the clicked tab
      */
      function showTab(tab){
        hideTabs();
        document.getElementById(tab).className = document.getElementById(tab).className.replace('hide', '');
      }
     
      hideTabs(); /* hide tabs on load */
     
      /*
      * Add click events
      */
      for(i in nav){
        nav[i].onclick = function(){
          showTab(this.className);
        }
      }
    })();
  </script>
HTML:
Code:
<p><input type="button" name="tab" value="Add Clue" class="div2" /></p>
<div id="div2" class="tab">
BLA BLA BLA
</div>
Can anyone tell me why IE is ignoring the button click (or perhaps just now un-hiding the div?) And also, would there be an easy workaround for this? Would prefer not to have to have two different pages because I.e. is pathetic.