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>