미리보기

'더보기' 버튼을 눌러보세요.

html

<div class="view_reply">
	<div class="reply_1dep">
	리스트 내용1 <button class="bt_more">더보기</button>
	</div>
	<div class="wrap_reply_2dep">
	리스트 내용2 버튼 눌렀을때 보여질 내용
	</div>
</div>
<div class="view_reply">
	<div class="reply_1dep">
	리스트 내용2 <button class="bt_more">더보기</button>
	</div>
	<div class="wrap_reply_2dep">
	리스트 내용2 버튼 눌렀을때 보여질 내용
	</div>
</div>

css

.view_reply{padding:10px 15px;border-bottom:1px solid #000}
.view_reply .reply_1dep{padding:8px 0;font-size:13px}
.view_reply .bt_more{position:relative;top:-1px;left:5px;padding:5px 8px;border:1px solid #000;border-radius:3px;background:#444;color:#fff;cursor:pointer}
.view_reply .wrap_reply_2dep{padding:15px 0;border-top:1px dotted #ddd;color:#999;font-size:13px}

script

$(document).ready(function(){
	$('.view_reply .wrap_reply_2dep').hide();
	$('.reply_1dep .bt_more').click(function(){
		if ($(this).hasClass('on')){
		$(this).removeClass('on');
		$(this).parent().parent().find('.wrap_reply_2dep').slideUp();
		}else{
		$(this).addClass('on');
		$(this).parent().parent().find('.wrap_reply_2dep').slideDown();
		}
	});
});

여러 사이트의 FAQ(자주하는 질문) 등에서 비슷한 효과로 자주 사용됩니다. 소스를 바꿔가면서 응용해 보세요.