Tạo panel đóng mở với jquery và CSS

Tạo panel đóng mở với jquery và CSS. Với tiện ích panel đóng mở với jquery và CSS này bạn có thể để trong nó 1 thông cáo gì đó mà trong khi không muốn tốn nhiều diện tích giao diện.

Khi khách viếng thăm muốn xem thì chỉ việc click vào mở ra là nó sẽ trải xuống,khi xem chán rồi thì click đóng lại là nó sẽ cuộn lên còn nếu không thì cứ để nguyên hiện trường vậy cũng chẳng sao.

DEMO
Để tạo tiện ích này bạn chỉ việc tiến hành tạo 1 tiện ích và dán code sau vào và lưu lại

<style type="text/css">

#paneltovik {display:block}

#panel {

background-color:#96BC43;/* Màu nền */

border:2px solid #a7cc54;

border-width:2px 2px 0 2px;

height:250px;/*Chiều cao khung*/

overflow:auto;

margin:0;

padding:10px;

color:#111;

font:normal 12px Times,Serif;/* Cỡ chữ */

-webkit-box-shadow:inset 0 0 7px #222;

-moz-box-shadow:inset 0 0 7px #222;

box-shadow:inset 0 0 7px #222;

display:none;

}

.tombolpanel {

position:relative;

cursor:pointer;

text-shadow:1px 1px 2px #000;

padding:7px 15px;

background-color:#333;

border-top:3px solid #a7cc54;

color:#e5e5e5;

text-align:center;

font:bold 14px Times,Sans-Serif;

font-style:italic;

-webkit-box-shadow:0 -1px 2px #222;

-moz-box-shadow:0 -1px 2px #222;

box-shadow:0 -1px 2px #222;

-webkit-border-radius:0 0 14px 14px;

-moz-border-radius:0 0 14px 14px;

border-radius:0 0 14px 14px;

}

.tombolpanel:hover {color:#ccc}

.tombolpanel:after {

content:'';

position:absolute;
top:100%;
margin-top:-10px;
left:5%;
width:0;
height:0;
display:block;
border-width:20px;
border-style:solid;
border-color:#333 #333 transparent #333;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.tombolpanel').click(function() {
$('#panel').slideToggle('slow');
$('.tombolpanel span.in').toggle();
});
});
</script>
<div id="paneltovik">
<div id="panel">
... Nội dung của bạn ...
</div>
<div class="tombolpanel">
<span class="in">Mở ra</span>
<span class="in" style="display:none;">Đóng lại</span>
</div>
</div>