Lateral desplegable

kimono69 · #1 (**permalink**) 23/06/2012, 15:52

Hola , necesito ayuda porque no encuentro nada sobre esto,sólo una barbaridad de instrucciones en las que debo instalar un toolkit,visual basic y no sé que más ... de locos vamos!!
Quiero hacer que una imagen se abra y se cierre haciendo click, exactamente como lo hace el spry collapsible panel en dreamweaver pero en vertical,y de derecha a izquierda! es posible con css? sino con lo que sea,pero sencillo
Agradezco cualquier aporte

noruas · #2 (**permalink**) 23/06/2012, 19:41

Se puede hacer con css, pero es bastante complejo de usar... Pero con JavaScript es bastante más sencillo:

te pongo un ejemplo sencillo de una caja que se despliega al hacer clic en una pestañita.

Código:

<html>
<head>
<script type="text/javascript">
    function capa()
    {
      var estilo = document.getElementById("capa").className; <!-- Aqui (donde pone capa) pones el nombre de la clase que le des a la caja que quieres que se despliegue -->
      if (estilo == "hidden")
      {
        document.getElementById("capa").className = "show"; <!-- Lo mismo aquí (donde pone capa) y donde pones "show" seria el estilo de la caja desplegada -->
      }
      else
      {
        document.getElementById("capa").className = "hidden"; <!-- Lo mismo aquí (donde pone capa) y donde pones "hidden" seria el estilo de la caja escondida -->
      }
    }
</script>
<style type="text/css">
.imput {width: 245px; height: 20px; background-color:#CFF; border: 1px solid;}
.hidden {display: none;}
.show {border:1px solid; width:243px;}
</style>
</head>
<body>
 <input type="button" value="CLICK PARA DESPLEGAR" class="imput" onClick="capa()" /> <!-- Lo mismo aqui en el "onClick" -->
 <div id="capa" class="hidden"> <!-- Aquí en el "id" pones "capa" o lo que hubieras declarado arriba en el script, y en la clase pues la que tengas para la caja sin desplegar -->
  <img src="http://www.anieto2k.com/wp-content/uploads/2008/04/homer_css-243x300.jpg" />
 </div>
</body>
</html>

kimono69 · #3 (**permalink**) 24/06/2012, 00:36

Muchas gracias por la ayuda Noruas, pero creo que no me expliqué bien del todo... Quiero que sea una imagen vertical,pero que se abra y cierre en horizontal de forma progresiva (que no aparezca de golpe,sino que se deslice).
Es exactamente igual que lo que hace el spry collapsible panel de dreamweaver pero que se abra en horizontal de derecha a izquierda en vez de arriba a abajo.
No sé si tengo que plantearlo en el foro java,pero queria saber si con css se podia. Gracias de nuevo Noruas, espero que alguien pueda echarme un cable, sea en css,java ,jquery o lo que sea

noruas · #4 (**permalink**) 24/06/2012, 04:22

Bueno si queres que se abra hacia la derecha, solo tienes que ajustar la posicion del imput y de la caja de forma distinta con un float a la izquierda por ejemplo.

Respecto a lo de que se abra de forma progresiva es ya configurar mas opciones del JS. Aquí te dejo un tutorial de como hacerlo:

[URL="http://www.scriptiny.com/2011/01/javascript-fade-in-out/"]http://www.scriptiny.com/2011/01/javascript-fade-in-out/[/URL]

kimono69 · #5 (**permalink**) 24/06/2012, 06:45

Resuelto,muchas gracias Norua!!