<p>
<input type="button" name="btnShow" id="btnShow" value="向下展開">
<input type="button" name="btnHide" id="btnHide" value="向上收起">
<input type="button" name="btnToggle" id="btnToggle" value="切換">
</p>
<p> </p>
<div id="box">box</div> body {
font-family: '微軟正黑體'; font-size: 11pt;
}
div {
float: left; height: 150px; border: 1px solid #000;
}
#box {
height: 100px; width: 100px;
background-color: #FF9;
} //展開/收起
$(document).ready(function(){
$('#btnShow').click(function (){
$('#box').slideDown(500);
});
$('#btnHide').click(function () {
$('#box').slideUp(500);
});
$('#btnToggle').click(function () {
$('#box').slideToggle(500);
});
});
External CSS
This Pen doesn't use any external CSS resources.