Ẩn và hiển thị bảng điều khiển với jQuery

Question

Tôi tự hỏi làm thế nào tôi có thể ẩn bảng đính kèm theo cách chỉ nút màu đỏ được hiển thị ở bên trái của cửa sổ trình duyệt và khi tôi nhấp vào nút màu đỏ để xuất hiện toàn bộ bảng điều khiển . Nếu tôi nhấp một lần nữa vào nút màu đỏ, bảng điều khiển sẽ biến mất một lần nữa ở phía bên trái của cửa sổ trình duyệt?

tôi biết tôi nên sử dụng định vị tuyệt đối liên quan đến một người họ hàng vị trí wrapper div, nhưng đó là tất cả ý tưởng của tôi ...

<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

đây một ví dụ rất đơn giản, tôi t sử dụng animate() chức năng để xử lý các hiển thị và ẩn nấp:

jQuery:

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

Working Demo Available here

CSS (từ bản 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; 
} 

HTML liên quan:

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

Answer 2

Check-out hiệu ứng jQuery UI cho những gì bạn đang cố gắng để đạt được:

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

Answer 3

Giải pháp cung cấp rất cơ bản và được nhắm mục tiêu đến sự kiện và tương tác 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); 
}); 

dụ Làm việc tại: 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; 
});