Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/07/2011, 11:21
walrus86
 
Fecha de Ingreso: junio-2010
Mensajes: 155
Antigüedad: 11 años, 3 meses
Puntos: 0
efectos se ven mal en IE

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:
Ver original
  1. <h4 id="Pregunta1" style="cursor:pointer">
  2.                 <img id="imgPreg1" src="http://www.acorrer.es/imagenes/flechaArriba.gif" alt="Mostrar/Ocultar" width="16" height="16" />
  3.                
  4.                 ¿Esta es la primer pregunta?
  5.             </h4>
  6.             <div id="respuesta1">
  7.                 <p">Esta es la respuesta.</p>
  8.             </div>
  9.  
  10.             <hr />


Código Javascript:
Ver original
  1. $(document).ready(function () {  
  2.  
  3.     $("#Pregunta1").click(function () {
  4.         if ($("#respuesta1").hasClass("oculto")) {
  5.             $("#imgPreg1").attr("src", 'Images/flechaArriba.gif');            
  6.             $("#respuesta1").removeClass("oculto");
  7.             $("#respuesta1").slideDown();
  8.         }
  9.         else {
  10.             $("#imgPreg1").attr("src", 'Images/flechaAbajo.gif');
  11.             $("#respuesta1").slideUp();            
  12.             $("#respuesta1").addClass("oculto");
  13.         }
  14.     });
  15. });

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?