hide and show panel with jQuery

Question

I wonder how can i hide the attached panel in a way that only the red button to be shown on the left side of the browser's window and when i click on the red button to appear the whole panel. If i click again on the red button, the panel to disappear again on the left side of the browser's window?

I know i should use absolute positioning related to a relative positioned wrapper div, but that's all my 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

Here is a very simple example, it uses the animate() function to handle the showing and hiding:

jQuery:

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

Working Demo Available here

CSS (from demo):

//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;
}

Related HTML:

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

Answer 2

Check out jQuery UI effects for what you're trying to acheive:

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

Answer 3

The provide solution is very basic and is targeted soley towards the onClick event and interaction.

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);
});

Working example available at: http://jsfiddle.net/5cdgw/