IE won't toggle element

Question

I have this javascript on my page to toggle a div and switching between two images

<script type="text/javascript">
 fuction toggleArchiv() {
  document.getElementById('cat').toggle();
  var image = document.getElementById('arrow');
  if (image.src == 'bullet_arrow_down.png')
   {
    image.src = 'bullet_arrow_up.png';
   }
   else
   {
    image.src = 'bullet_arrow_down.png';
   }
  }
</script>

Works fine on modern browsers, but IE keeps saying there is an error at that line

document.getElementById('cat').toggle();

So it doesn't toggle the div and neither switches the image. What to do?

Answer 1

I think the problem is calling toggle() on a HTMLElement not a jQuery object. You should use the jQuery selector instead of getElementById() like this:

$('#cat').toggle();

Answer 2

It looks to me like you're using the PrototypeJS library. The library will add methods to DOM elements, in this particular case it's adding HTMLElement.prototype.toggle. DOM prototyping is only supported in IE8 and later and it must be rendering in standards mode. In order to get it working in all browsers, use the $() method instead of getElementById():

$('cat').toggle();

http://api.prototypejs.org/dom/element/toggle/