efectos se ven mal en IE

[walrus86]

hola que tal? les hago una consulta a ver si me pueden ayudar con un problema.
Necesito hacer un efecto similar a un accordion, en el cual hago un click en la pregunta y se despliega la respuesta, y con otro click se esconde.

El código es este:

Código HTML:

<h4 id="Pregunta1" style="cursor:pointer">
                <img id="imgPreg1" src="http://www.acorrer.es/imagenes/flechaArriba.gif" alt="Mostrar/Ocultar" width="16" height="16" /> 
                
                ¿Esta es la primer pregunta?
            </h4>
            <div id="respuesta1">
                <p">Esta es la respuesta.</p>
            </div>
 
            <hr />
 

Código Javascript:

$(document).ready(function () {   
 
    $("#Pregunta1").click(function () {
        if ($("#respuesta1").hasClass("oculto")) {
            $("#imgPreg1").attr("src", 'Images/flechaArriba.gif');            
            $("#respuesta1").removeClass("oculto");
            $("#respuesta1").slideDown();
        }
        else {
            $("#imgPreg1").attr("src", 'Images/flechaAbajo.gif');
            $("#respuesta1").slideUp();            
            $("#respuesta1").addClass("oculto");
        }
    });
});
 

Mi problema es que en Chrome y Firefox el efecto se ve bien, pero en IE, no se por qué cuando hace el slideUp() se elimina el margin-bottom de la pregunta y la verdad queda muy feo. Probé comentando la linea: $("#imgPreg1").attr("src", 'Images/flechaAbajo.gif'); y funciona bien, alguien sabe como se soluciona esto?