CSS實戰-div隱藏與展開

1. 內容過多部分隱藏與展現

<div id="queryField" style="height: 100px; overflow-y: hidden;">
	<div class="searchField">
	</div>
	<div class="searchField">
	</div>
	<a id="displayAllQueryField" href="javascript:" class="fold-expand-btn fold-btn">
		<label>展開</label>
	</a>
	<div class="moreSearchField">
	</div>
	<div class="moreSearchField">
	</div>
</div>

.fold-expand-btn {
	display: inline;
	height: 26px;
	width: 48px;
	line-height: 26px;
	text-align: center;
	border: 1px solid #A9A9A9;
	border-radius: 13px;
	font-size: 12px;
	color: #A9A9A9;
	letter-spacing: 0;
	padding: 4px;
}
a.fold-expand-btn:hover {
	background: #009688;
	border: 0px solid #60BEAA;
	color: #FFFFFF;
}
.fold-btn label {
	padding-left: 10px;
	background: url(fold-icon.png) no-repeat left;
}
a.fold-btn:hover label {
	background: url(fold-icon2.png) no-repeat left;
}
.expand-btn label {
	padding-left: 10px;
	background: url(expand-icon.png) no-repeat left;
}
a.expand-btn:hover label {
	background: url(expand-icon2.png) no-repeat left;
}

// 搜索條件展現與隱藏
$('.moreSearchField').css({'display':'none'});
$('#queryField').css({'overflow-y':'visible'});
$('#displayAllQueryField').click(function() {
	var tmpClass = $(this).prop('class');
	if(tmpClass.indexOf('fold-btn') > -1) {
		$('#queryField').css({'overflow-y':'hidden'});
		$('.moreSearchField').css({'display':'inline'});
		$('#queryField').css({'height':'190px', 'transition':'height ease-out 0.6s'});
			//$(this).val('no');
			$(this).children('label').text('收起');
			setTimeout(function(){
				$('#queryField').css({'overflow-y':'visible'});
			}, 600);
			$(this).removeClass('fold-btn');
			$(this).addClass('expand-btn');
	} else {
		$('#queryField').css({'overflow-y':'hidden'});
		$('#queryField').css({'height':'100px', 'transition':'height ease-out 0.6s'});
		//$(this).val('yes');
		$(this).children('label').text('展開');
		setTimeout(function(){
			$('.moreSearchField').css({'display':'none'});
			$('#queryField').css({'overflow-y':'visible'});
		}, 600);
		$(this).removeClass('expand-btn');
		$(this).addClass('fold-btn');
	}
});