$("#tool1").click(function(){
if($('#status').height() > 100){
$('#status').hide(500, function() { // hide the div
$(this)
.css('height','50px') // change the height
.show(500); // then show again
});
}
});
デモ
上記のコメントによると
$("#tool1").click(function(){
var orig = $('#status').height(),
target = orig == 250 ? 50 : 250;
$('#status').animate({
height: target
},1000);
});
デモ
以下のコメントによると
デモ内のボタン
次のようにコードを変更します。
$(document).ready(function() {
$("#tool1").click(function(e) {
e.preventDefault(); // preventDefault() for pare reload
var $statusDiv = $('#status');
if ($statusDiv.height() > 100) {
$statusDiv.height(50);
}
else {
$statusDiv.height(250);
}
});
});
デモ
ノート
href
から削除することもできます#tool1
上記のコードから#tool1
削除するだけでなく、ボタンを使用する場合は、現在リンクタグです。e.preventDefault()