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

편리

PHP와 MariaDB, jQuery 등을 사용해 게시판, 쇼핑몰 솔루션을 개발합니다. 그누보드5와 영카트5 개발에 참여 했습니다. Linux와 Nginx는 물론 WordPress, Git 등에도 관심이 많습니다. 자전거 타기 및 사진 촬영을 취미로 하고 있습니다.

카카오톡 플러스친구 채팅 : NCUBE.NET

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.