error con .show .hide y <div>

Eddy Ramos · #1 (**permalink**) 19/05/2011, 12:18

por primera vez notengo problemas con ie, ahora es el crome, firefox y safari.
Estoy manejando las capas con <div> para agrupar los contenidos, colocando los efectos de jquery .show .hide, para hacer un acordeon que se mueve de forma horizontal.
El problemas es que en los navegadores que mencioné el contenedor se baja y se coloca en la parte inferior
el ejemplo esta en
http://studiobuque.com/demo/acordeon/prueba-acorden.html

index.html

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="script/jquery.js"></script>
<script src="script/jquery-acordeon-1.1.js"></script>
 
</head>
 
<body>
<div class="grid_6 cuerpo">
    <div style="display:block;">
     
<!--  Inicio -->
        <div class="caja" id="caja_inicio">
            <div class="caja_contenido" id="caja_cont_0">
            <div class="entrada"">          
 
<!--  El texto aqui-->
 
            </div>
            </div><!-- /caja_contenido -->
        </div>
        
<!-- presentacion -->
        <div class="caja" id="caja_presentacion">
            <div class="caja_imagen">
                <a href="#" id="caja_img_1">
                    <img id="caja_imagen_mostrar" src="img/boton.jpg" />
                </a>            
            </div><!-- /caja_imagen -->
            <div class="caja_contenido" id="caja_cont_1" style="">
            <div class="entrada">
 
<!--  Mas texto aqui-->
 
            </div>
            </div><!-- /caja_contenido -->
        </div>
        
<!-- servicios -->
        <div class="caja" id="caja_servicios">
            <div class="caja_imagen">
                <a href="#" id="caja_img_2">
                    <img id="caja_imagen_mostrar" src="img/boton.jpg" />                </a>            </div><!-- /caja_imagen -->
            <div class="caja_contenido" id="caja_cont_2" style="">
            <div class="entrada" >
 
            </div>
            </div><!-- /caja_contenido -->
        </div>
        
<!-- proyectos -->
        <div class="caja" id="caja_proyectos">
            <div class="caja_imagen">
                <a href="#" id="caja_img_3">
                    <img src="img/boton.jpg" />
                </a>
            </div><!-- /caja_imagen -->
            <div class="caja_contenido" id="caja_cont_3" style="">
            <div class="entrada" style=" padding-top:0px; overflow:hidden;">
                
            </div>
            </div><!-- /caja_contenido -->
        </div>
        
<!-- contacto -->
        <div class="caja" id="caja_contacto" style="margin-top:20px;">
          <div class="caja_imagen">
                <a href="#" id="caja_img_4">
                    <img src="img/boton.jpg" />
                </a>    
      </div><!-- /caja_imagen -->
            <div class="caja_contenido" id="caja_cont_4" style="">
            <div class="entrada">
            
            </div>
            </div><!-- /caja_contenido -->
        </div>
    </div>
</div><!-- /cuerpo -->
 
</body>
</html>

jquery-acordeon-1.1.js

Código Javascript:

Ver original$(document).ready(function(){
    
    $("#caja_img_1").click(function(event){
       $("#caja_cont_0").hide("slow");
       $("#caja_cont_2").hide("slow");
       $("#caja_cont_3").hide("slow");
       $("#caja_cont_4").hide("slow");
       $("#caja_cont_1").show("slow");
    });
    $("#caja_img_2").click(function(event){
       $("#caja_cont_0").hide("slow");
       $("#caja_cont_1").hide("slow");
       $("#caja_cont_3").hide("slow");
       $("#caja_cont_4").hide("slow");
       $("#caja_cont_2").show("slow");
    });
    $("#caja_img_3").click(function(event){
       $("#caja_cont_0").hide("slow");
       $("#caja_cont_1").hide("slow");
       $("#caja_cont_2").hide("slow");
       $("#caja_cont_4").hide("slow");
       $("#caja_cont_3").show("slow");
    });
    $("#caja_img_4").click(function(event){
       $("#caja_cont_0").hide("slow");
       $("#caja_cont_1").hide("slow");
       $("#caja_cont_2").hide("slow");
       $("#caja_cont_3").hide("slow");
       $("#caja_cont_4").show("slow");
    });
 
});

Ya busque en google pero no encontré la solución
Graciass

Eddy Ramos · #2 (**permalink**) 19/05/2011, 14:03

el problema es que se pasa el div de los contenidos a la parte inferior y no logro arreglarlo, estoy comenzando a utilizar jquery

Eddy Ramos · #3 (**permalink**) 19/05/2011, 14:53

Ya listo
El problema no fue de jquery lo probe cambiando el .hide y . show entre "slow" "fast", no funciono seguian saltando las cajas abajo.
Solo quite el div que de caja

Código HTML:

Ver original<!-- presentacion -->
        <div class="caja" id="caja_presentacion">
            <div class="caja_imagen">
                <a href="#" id="caja_img_1">
                    <img id="caja_imagen_mostrar" src="img/boton.jpg" />
                </a>            
            </div><!-- /caja_imagen -->
            <div class="caja_contenido" id="caja_cont_1" style="">
            <div class="entrada">
 
<!--  Mas texto aqui-->
 
            </div>
            </div><!-- /caja_contenido -->
        </div>

quedando así

Código HTML:

Ver original<!-- presentacion -->
            <div class="caja_imagen">
                <a href="#" id="caja_img_1">
                    <img id="caja_imagen_mostrar" src="img/boton.jpg" />
                </a>            
            </div><!-- /caja_imagen -->
            <div class="caja_contenido" id="caja_cont_1" style="">
            <div class="entrada">
 
<!--  Mas texto aqui-->
 
            </div>
            </div><!-- /caja_contenido -->