Como expandir/contraer un elemento padre haciendo click en uno de sus hijos?

[cristian_cena]

Hola, resulta que quiero que un div se muestre con un efecto deslizante solo cuando se haga click en uno de sus hijos.

Al div padre le doy la id "contenedor" y al hijo encargado de mostrarlo le doy la id "toolsRight" (al otro hijo que no interviene en el efecto le doy la id "toolsLeft"), aquí su html:

Código HTML:

<div id="contenedor">
<div id="toolsLeft"></div>
<div id="toolsRight"></div>
</div> 

Como pueden ver en el siguiente css, a contenedor lo mantengo con un width:83px; que es el resultado de la suma del ancho de toolsLeft + toolsRight.

Código:

            #contenedor{
            overflow:hidden; 
            background-image:url(img/menu/degradado.png);
            background-repeat:no-repeat;
            width:83px; /*372px*/
            height:29px;
            position:absolute;
            top:0px;
            left:0px;
            }
            #toolsLeft {
            float:left;
            background-image:url(img/menu/toolsLeft.png);
            background-repeat:no-repeat;
            background-position:top;
            width:53px; height:27px;
            }
            #toolsRight {
            float:right;
            background-image:url(img/menu/toolsRight.png);
            background-repeat:no-repeat;
            background-position:top;
            width:30px; height:27px;
            overflow:hidden;
            }

La idea es que el ancho de contenedor crezca/decrezca cuando se haga click en toolsRight, haciéndolo con un efecto deslizante, para ello hice lo siguiente:

Código:

$(document).ready(function(){
    $("#toolsRight").click(function() {    
        $("#contenedor").animate({width: '372px', opacity: '1'}, "slow");    
    });
    $("#toolsRight").click(function() {
        $("#contenedor").animate({width: '83px', opacity: '1'}, "slow");

    });
});

Bien, el tema está en que al hacer click en toolsRight, contenedor crece y decrece al mismo tiempo.

Lo que no puedo lograr es que el efecto "pare" cuando contenedor alcanza un width:372px; y que luego al hacer click nuevamente en toolsRight se vuelva a reproducir, esta vez "parando" cuando contenedor llegue a un width:83px;

¿Alguna ayudita, articulo o link? desde ya muchisimas gracias, espero haber explicado bien el problema.

Un saludo

[Dany_s]

con la función toggle()

poque como lo tenés se ejecuta las 2 al hacer click por eso vuelve, con toggle al hacer click se ejecuta la función del primer parámetro que le decis vaya a 372px y en la fución del parámetro 2 a 83px

[cristian_cena]

Hola Dany_s muchas gracias, interpreto lo que me dices:

Ahora, en el siguiente código incluyo la funcion toogle:

Código:

$(document).ready(function(){
	$("#toolsRight").click(function() {	
		$("#contenedor").toggle({width: '372px', height: "29px", opacity: '1'}, "normal");	
	});
	$("#toolsRight").click(function() {	
		$("#contenedor").toggle({width: '83px', height: "29px", opacity: '1'}, 2000);	
	});
});

Pero su comportamiento no es el deseado, es decir hace desaparecer / aparecer a contenedor en vez de expandirlo y contraerlo, cosa que lograba con el método animate()

Te pregunto, es posible anidar el metodo animate al metodo toggle(). ??

desde ya muchas gracias. saludos.

[muotaku]

El problema esta en que no verificas que width tiene para saber que animación le toca hacer, eso se arregla de esta forma

Código:

$(document).ready(function(){
	$("#toolsRight").click(function() { 						
		if($("#contenedor").css('width') == '83px'){							
			$("#contenedor").animate({width: '372px', opacity: '1'}, "slow");  
		}else{
			$("#contenedor").animate({width: '83px', opacity: '1'}, "slow");
		}
	});
});

como podrás ver utilizo css('width') para saber que tamaño tiene y así ejecutar la animación que corresponda.

Un saludo.

[cristian_cena]

Hola muotaku, ¿estas seguro de que eso funciona? porque a mi no

[muotaku]

A mi si me funciona, tanto en IE 8 como en firefox, al pulsar la capa toolsRight se agranda la capa padre contenedor.

Un saludo.

[cristian_cena]

Valla, sera porque soy nuevo con jquery entonces ja, bueno lo probaré, gracias. Saludos

[Dany_s]

lo tenés hacer es ver los ejemplos que estáan en la doc http://api.jquery.com/toggle/

actua diferente al hacer $(el).toggle();
o al hacer
o $(el).toggle(funcion1, funcion2)

lo que hace toggle es alternar clicks en un elemento o esconder y mostrar

este es el ejemplo de la doc para alternar clicks

Código HTML:

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>

    <li>Take a jog</li>
  </ul>
<script>
    $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

</script>
</body>
</html> 

viendo eso no es nada agrandar y achicar el ancho

Código HTML:

<head>
    <title>Prueba</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#toolsRight").toggle(
        function() {
            $("#contenedor").animate({width: '372px', opacity: '1'}, "slow");
        }, function() {
            $("#contenedor").animate({width: '83px', opacity: '1'}, "slow");

        });
    });
    </script>
    <style>
 		#contenedor{
            background-color:#CCCCCC;
            width:83px; height:29px;
            }
        #toolsLeft {
            background-color:#0033FF;
            width:53px; height:27px;
			float:left;
            }
        #toolsRight {
            background-color:#CC6600;
            width:30px; height:27px;
			float:right;
            }
    </style>
</head>
<body>
	<div id="contenedor">
		<div id="toolsLeft"></div>
		<div id="toolsRight"></div>
	</div>
</body>
</html> 

[cristian_cena]

Muchisimas gracias Dany_s, de verdad no se como agradecerte. Ahora comprendo mejor el tema, aunque debo admitir que tengo que meterme con mayor profundidad porque suele pasar que no funcionan los codigos que escribo , bue.. sera cuestion de seguir leyendo.

Un abrazo