ocultar y mostrar el panel con jQuery

Question

Me pregunto cómo puedo ocultar el panel adjunto de forma que solo se muestre el botón rojo en el lado izquierdo de la ventana del navegador y cuando hago clic en el botón rojo aparezca todo el panel . Si vuelvo a hacer clic en el botón rojo, el panel desaparecerá nuevamente en el lado izquierdo de la ventana del navegador?

Sé que debería utilizar el posicionamiento absoluto relacionada con un pariente posicionado div contenedor, pero eso es todo mi idea ...

<div class="wrapper"><div id="panel"></div><!-- #panel --><p>content</p></div><!-- .wrapper --> 

.wrapper {position: relative; margin: 0 auto; width: 800px; height: 500px;} 

#panel {position: absolute; left: -150px; top: 50px;} 

Answer 1

Aquí es un ejemplo muy sencillo, i T utiliza la función animate() para manejar el mostrar y ocultar:

jQuery:

$('#click').click(function() 
{ 
    $("#panel").animate({width:'toggle'},500);  
}); 

Working Demo Available here

CSS (de demostración):

//The content panel 
#panel 
{ 
    height: 500px; 
    width: 200px; 
    background: black; 
    float: left; 
    display: none;  
    color: white; 
    font-size: xx-large; 
} 

//The tab 
#click 
{ 
    height: 50px; 
    width: 25px; 
    background: red; 
    float: left; 
    margin-top: 200px; 
} 

HTML relacionadas:

<div id='panel'>[Put your content here]</div> 
<div id='click'> 

Answer 2

Echa un vistazo a efectos jQuery UI para lo que estamos tratando acheive:

http://jqueryui.com/demos/effect/

Answer 3

El proporcionar la solución es muy básico y se dirige hacia Soley el evento e interacción onClick.

HTML:

<div id="panel">Content 
</div> 
<div id="tab">+</div> 

CSS:

#panel { width: 300px; height: 200px; background: #000; display: none; float: left; } 
#tab { width: 50px; background: #FF0000; height: 50px; float: left; text-align: center;} 

jQuery:

$("#tab").click(function(){ 
    $("#panel").animate({width:'toggle'},350); 
}); 

Ejemplo de trabajo disponible en: http://jsfiddle.net/5cdgw/

Answer 4

example jsfiddle

CSS:

.wrapper {position:absolute;left:-200px;width:300px;height:400px;} 
#panel {background:red;position:absolute;right:0;top:30px;width:100px;height:150px;cursor:pointer} 
.wrapper > p {background:#000;color:#fff;width:200px;height:400px;} 

jQuery:

var isOpen = false; 
$('#panel').click(function() { 
    if (isOpen) { 
     $(this).parent().stop(true, true).animate({left: '-200'}, 'fast'); 
    } else { 
     $(this).parent().stop(true, true).animate({left: '0'}, 'fast'); 
    } 
    isOpen = !isOpen; 
});