Javascript onclick event is not working in Internet Explorer 8

I have the following line of code that works fine in Firefox, Chrome and Safari, but not in internet explorer 8.

<a href="javascript:void(0);" onclick="showHide('reading','type_r','r');">Show me the example</a>

The function simply shows and hides a div on clicking the hyperlink.

Is there anything I'm missing here?

This is the showHide function:

function showHide(elementId,parent开发者_如何学编程Id,qtype) {

    if (document.getElementById && !document.all) {

        var elementParent = document.getElementById(parentId);
        var element = document.getElementById(elementId);
        var upArrowId = 'up-arrow-'+qtype;
        var downArrowId = 'down-arrow-'+qtype;

        if(element.style.visibility == 'hidden'){

            elementParent.style.height = 'auto';
            element.style.visibility = 'visible';
            document.getElementById(upArrowId).style.visibility = 'visible';
            document.getElementById(downArrowId).style.visibility = 'hidden';
        }
        else if(element.style.visibility == 'visible'){
            element.style.visibility = 'hidden';
            elementParent.style.height = '50px';
            document.getElementById(upArrowId).style.visibility = 'hidden';
            document.getElementById(downArrowId).style.visibility = 'visible';      
        }
    }
}

!document.all excludes IE from the code execution of your function

Your Javascript code should be this:

function showHide(elementId,parentId,qtype) { 

    var elementParent = document.getElementById(parentId); 
    var element = document.getElementById(elementId); 
    var upArrowId = 'up-arrow-'+qtype; 
    var downArrowId = 'down-arrow-'+qtype; 

    if(element.style.visibility == 'hidden'){ 

        elementParent.style.height = 'auto'; 
        element.style.visibility = ''; 
        document.getElementById(upArrowId).style.visibility = ''; 
        document.getElementById(downArrowId).style.visibility = 'hidden'; 
    } 
    else if(element.style.visibility == ''){ 
        element.style.visibility = 'hidden'; 
        elementParent.style.height = '50px'; 
        document.getElementById(upArrowId).style.visibility = 'hidden'; 
        document.getElementById(downArrowId).style.visibility = '';       
    } 
}

The !document.all is stopping IE for starters. Also you shouldn't check visibilty == 'visible' since it wont work to begin with. (The default is "" so you should use that unless you have explicitly set visibility = "visible" on the element)

But above all - google jQuery! You'll be replacing all this with element.toggle() before you know it!