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'>