[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를 지정해서 처리를 했는데.. 훨씬 코드도 간단해지고 좋아졌다.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.