¿Onclick con doble función?

[AngelMarine]

Hola, el siguiente código: onclick="document.getElementById('contenido').styl e.right='-150px';" hecha hacia un lado el contenido general y deja ver un menu lateral que se encuentra debajo de dicho contenido.

Como verán es un script muy sencillo, lo único que hace es desplazar el div contenedor - (menos) 150 píxeles a la derecha y aparece otro div con menor z-index debajo.

Bueno, el problema está en que al dar click en el botón con la función onclick ocurre el suceso, pero........ ¿¿¿y luego para volver a su posición original???.

Se me ocurre esto, sin embargo, aún no anda:

<div id="contenido" onclick="mostrarMenu(this)">
<div>...</div>
</div>


<script language="javaScript">

function mostrarMenu(objeto){
document.getElementById('contenido').style.right='-150px';
objeto.onclick = function(){esconderMenu(objeto)};
}

function esconderMenu(objeto){
document.getElementById('contenido').style.right=' 0px';
objeto.onclick = function(){mostrarMenu(objeto)};
}
</script>

[quimfv]

Mira si te sirve esto

Código Javascript:

var posicion=document.getElementById('contenido').style.right;
function mostrarEsconderMenu(){
    if(posicion==' 0px'){
        document.getElementById('contenido').style.right='-150px';
    }else{
        document.getElementById('contenido').style.right=' 0px';
    }
    posicion=document.getElementById('contenido').style.right;
}
 

var posicion=document.getElementById('contenido').styl e.right;

debería estar despues de 'contenido'

[CHuLoSoY]

Te cunde una condición como la que dice quimfv o utilizar jquery, que con una función lo hace él solo.

Saludos.

[America|UNK]

Algo más optimizado:

Código Javascript:

document.getElementById("contenido").onclick = function(){
        this.style.right = (getComputedStyle(this).getPropertyValue("right").match(/^0/) ? -150 : 0) + "px";
}
 

Demo: http://jsfiddle.net/wZVanG/jep3msb7/

Por qué getComputedStyle?: this.style.right te mostrará undefined si el elemento HTML no tiene ningún estilo asignado por el atributo style=""

Con jQuery puedes reducir aún más.

[Alexis88]

Y dado a que la propiedad getComputedStyle tiene soporte en IE solo a partir de la versión 9, adáptalo con la propiedad currentStyle para que también funcione en versiones anteriores.

Código Javascript:

if (window.getComputedStyle){
    this.style.right = (!parseInt(getComputedStyle(this).right) ? -150 : 0) + "px";
}
else{
    this.style.right = (!parseInt(this.currentStyle.right) ? -150 : 0) + "px";
}
 

A diferencia del ejemplo de mi paisano America|UNK, tomo la parte entera de la propiedad (dada con el símbolo de píxeles) y si es falsa (que equivale a que sea igual a cero), le asigno los -150 píxeles, caso contrario, cero.

Saludos