dar el efecto toggle a div posicionandolo bien

[catpaw]

hola forer@s, como les va

miren esta imagen:

http://www.subeimagenes.com/img/toggle-350048.html

Subido en SubeImagenes.com

creo habla por si misma, pero por si algun motivo no se ve ahi les va la explicacion y el codigo:


un div absoluto a la derecha con una imagen de flecha hacia la izquierda que al darle clic con el efecto toggle deslice el div hacia la izquierda, pero que se detenga hasta que quede la imagen de la flecha visible y que al mismo tiempo la cambie por una flecha hacia la derecha

con el div "escondido" pero la flecha hacia la derecha visible, al dar clic sobre la misma el div se deslice hacia la derecha hasta su posicion original.

aqui tengo ya armado el div:

http://www.subeimagenes.com/img/div-350056.html

Subido en SubeImagenes.com

mi css:

Código HTML:

#accesos_directos{
	width:100px;
	height:300px;
    margin:30px auto auto 1010px;
	position:absolute;
}
#accesos_directos .clic_area_abrir{ /*boton para mostrar los accesos*/
	background:url(images/clic_area_open.png) no-repeat;
	width:15px;
	height:100px;
	float:right;
	cursor:pointer;
}
#accesos_directos .clic_area_cerrar{ /*boton para ocultar los accesos*/
	background:url(images/clic_area_close.png) no-repeat;
	width:15px;
	height:100px;
	float:right;
	cursor:pointer;
}
#accesos_directos .accesos_area{
	width:85px;
	height:300px;
	background:#5c5c5c;
	float:left;
}

mi html:

Código HTML:

<div id="accesos_directos">
    	<a id="close_accesos" href="javascript:;" class="clic_area_cerrar"></a>
        <a id="open_accesos" href="javascript:;"  class="clic_area_abrir" style="display:none;"></a>
        <div class="accesos_area"></div>
</div> 

mi intento de jquery

Código:

jQuery('#close_accesos').click(function() {
    	jQuery('#accesos_directos').toggle(1000);
		document.getElementById('open_accesos').style.display='block';
		document.getElementById('close_accesos').style.display='none';
  });
jQuery('#open_accesos').click(function() {
    	jQuery('#accesos_directos').toggle(1000);
		document.getElementById('open_accesos').style.display='none';
		document.getElementById('close_accesos').style.display='block';
  });

explico un poco:

al dar clic en algun enlace por su id acciona el jquery, esta linea si hace el efecto:

jQuery('#accesos_directos').toggle(1000);

peroooo desliza el div a la izquierda hasta desaparecerlo y ya no lo vuelvo a ver, estas lineas deberian cambiar las imagenes de flechas

document.getElementById('open_accesos').style.disp lay='block';
document.getElementById('close_accesos').style.dis play='none';

les agradeceria mucho me indiquen la forma correcta para realizar esto y si no alguna alternativa parecida por favor

edito: no es obligatorio usar toggle, mientras el div se deslice hacia derecha o izquierda

[catpaw]

ya lo resolvi por si a alguien le interesa, cambie un poquito el script:

Código:

jQuery('#close_accesos').click(function() {
	jQuery('#accesos_directos').animate({ 'marginLeft' : "-=85px" });
	document.getElementById('open_accesos').style.display='block';
	document.getElementById('close_accesos').style.display='none';
});		
jQuery('#open_accesos').click(function() {
	jQuery('#accesos_directos').animate({ 'marginLeft' : "+=85px" });
	document.getElementById('open_accesos').style.display='none';
	document.getElementById('close_accesos').style.display='block';
});

works perfect ;)

Saludos!!

[wolflone1983]

he intentado hacerlo que dices pero no hace nada
no se mueve