[jQuery] 클릭 내용 펼침 코드
게시판 등의 리스트 화면에서 제목 등을 클릭하면 아래 쪽에 내용이 슬라이딩 되면서 보이는 기능을 구현한 코드이다.
HTML 코드는 아래와 같이 구성되어 있다.
<li class=”list”>
<div class=”no”><?php echo $no; ?></div>
<div class=”content_wrap”>
<div class=”name”><span><?php echo $name; ?></span></div>
<div class=”phone”><?php echo $phone; ?></div>
<div class=”email”><?php echo $email; ?></div>
<div class=”content”><?php echo $content; ?></div>
</div>
<div class=”date”><?php echo $date; ?></div>
</li>
그리고 아래는 해당 기능을 수행하는 jQuery 코드이다.
<script type=”text/javascript”>
$(function() {
$(‘div.content_wrap span’).click(function() {
var $content = $(this).closest(‘.content_wrap’).children(‘.content’);
if($content.is(“:visible”)) {
$content.slideUp(100);
} else {
$(‘div.content:visible’).hide();
$content.slideDown(100)
}
});
});
</script>
이 코드를 생각해내기 전까지는 모든 내용 부분에 ID를 지정해서 처리를 했는데.. 훨씬 코드도 간단해지고 좋아졌다.