lograr un efecto como este

catpaw · #1 (**permalink**) 01/08/2012, 13:04

que tal forer@s

Vean el pie de pagina de este sitio

http://www.banorte.com/portal/personas/home.web

es como un efecto de acordion que oculta el div

logre ocultar el contenido del div pero me deja el espacio que ocupan del mismo tamaño

lo ideal es que oculte el contenido si, pero que "haga pequeño" el div como en esa pagina

Código HTML:

<script type="text/javascript">
  	jQuery(document).ready(function() {		
		 jQuery('#mostrar').click(function() {
    		jQuery('#enlaces_top').slideDown(1000);
			document.getElementById('mostrar').style.display='block';
  		});
  		jQuery('#ocultar').click(function() {
    		jQuery('#enlaces_top').slideUp(1000); 
			document.getElementById('ocultar').style.display='none'; 
  		});
	});
  </script>
<!-- los enlaces-->
<a id="ocultar" href="javascript:;"  class="cerrar">Ocultar</a>
<a id="mostrar" href="javascript:;" class="abrir" style="display:none;">Abrir</a>
<!--las clases-->
<style>
#footer .cerrar{ /*clase para <a> para ocultar los enlaces*/
	background: url(images/close.png) right top no-repeat;
	padding:1px 18px 0 0;
	color:#333;
	font-size:11px;
	float:right;
	margin-top:5px;
	margin-right:10px;
}
#footer .abrir { /*clase para <a> para mostrar los enlaces*/
	background: url(images/open.png) right top no-repeat;
	padding:1px 18px 0 0;
	color: #333;
	font-size:11px;
	float:right;
	margin-top:5px;
	margin-right:10px;
}
</style>

con eso me hace el efecto parecido pero oculta solo los links dejando intacto el espacio que estos ocupaban

quiero que literal oculte/quite el div al presionar #ocultar y me muestre el link de #mostrar (actualmente oculta el link ocultar pero no pone el link mostrar

) y al dar clic a #mostrar vuela a desplegar el div

yo intente con ese código pero si ustedes me sugieren otra cosa mejor

gracias

nicolasroma · #2 (**permalink**) 01/08/2012, 13:20

Probaste modificando el height del div en la misma intruccion que usas para ocultar los enlaces?

pode usar en vez de slide() podes usar .animate({height:"10px"})

catpaw · #3 (**permalink**) 01/08/2012, 13:32

hola nicolasroma

cambie esto

jQuery('#enlaces_top').slideUp(1000);

por

jQuery('#enlaces_top').animate({height:"10px"});

y solo hace la animacion pero no oculta nada ni modifica el height del div

:(

catpaw · #4 (**permalink**) 01/08/2012, 13:34

hola nicolasroma

cambie esto

jQuery('#enlaces_top').slideUp(1000);

por

jQuery('#enlaces_top').animate({height:"10px"});

y solo hace la animacion pero no oculta nada ni modifica el height del div

:(

nicolasroma · #5 (**permalink**) 01/08/2012, 13:53

el div que contienen los links tiene como id= footer?

catpaw · #6 (**permalink**) 01/08/2012, 14:04

Mi internet esta terrible de lento, disculpen los mensajes duplicados u.u

el div que contiene los enlaces se llama enlaces_top -> es el que quiero que lleve el efecto, ya logre un avance, cambie las funciones .clic un poco, asi:

Código:

jQuery('#ocultar').click(function() {
    		jQuery('#enlaces_top').slideUp(1000);
			jQuery('#enlaces_top').height(10); /*250*/
			document.getElementById('ocultar').style.display='none';
			document.getElementById('mostrar').style.display='block';
  		});
		jQuery('#mostrar').click(function() {
    		jQuery('#enlaces_top').slideDown(1000);
			jQuery('#enlaces_top').height(250);
			document.getElementById('ocultar').style.display='block';
			document.getElementById('mostrar').style.display='none';
  		});

ya logro que se oculte o se muestre el enlace #ocultar - #mostrar segun se haya clicado

pero sigo sin lograr que el div cambie de tamaño

esto no esta sirviendo jQuery('#enlaces_top').height(valor);

tengo asi el html:

Código HTML:

<div class="shadow"><!--capa que envuelve todo-->
                  <!--enlaces para ocultar o mostrar-->
	 	  <a id="ocultar" href="javascript:;"  class="cerrar">Ocultar</a>
	 	  <a id="mostrar" href="javascript:;" class="abrir" style="display:none;">Abrir</a>
		  <!--capa delos enlaces-->
                  <div id="enlaces_top" class="enlaces_top">
                       <!--enlaces-->
                  </div>
</div><!--shadow-->

nicolasroma · #7 (**permalink**) 01/08/2012, 14:26

Fijate si te sirve esto, es como yo lo haría... (lo podes ver funcionar aca http://www.nicolasroma.com.ar/ayuda.php )

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>

<style> 
#footer
{
padding:10px;
background-color:grey;
overflow:hidden;
height:150px;
}

</style>

</head>

<body>

<div id="footer">
<input id="cerrar" type="button" value="cerrar"/> <input id="abrir" type="button" value="abrir"/><br/>
<a href="">LINK[1]</a><br/>
<a href="">LINK[0]</a><br/>
<a href="">LINK[2]</a><br/>
<a href="">LINK[3]</a><br/>
<a href="">LINK[4]</a><br/>
<a href="">LINK[5]</a><br/>
</div>

</body>
<script>

$("#abrir").click( function(){ $("#footer").animate({height:"150px"},500 ); });
$("#cerrar").click( function(){ $("#footer").animate({height:"20px"},500 ); });
</script>

fleandro · #8 (**permalink**) 01/08/2012, 14:47

Muy claro tu ejemplo nico Gracias..

catpaw · #9 (**permalink**) 01/08/2012, 17:04

Gracias nicolas roma

Ya funciona

Probe tu ejemplo y si hace la animacion y disminuye el tamaño del div pero no deja ocultos lo enlaces los despliega despues de la animacion, de todos modos como lo tengo si funciona, de hecho si funcionaba, lo que no permitia que trabajara el script es que en la capa que "envuelve todo" hay una imagen background, quite la capa y funciono bien

gracias por tu ayuda