댓글 개수가 많을 때 더보기 버튼을 통해 댓글 펼치기

안녕하세요...

미니님a입니다.

해당 팁은 게시판 스킨으로 업로드 된 파일을 직접 적용하고자 할 때 

아래대로 진행 시 기존 소스는 유지하면서 기능만 추가할 수 있습니다.

만약 소스 수정이 다소 어려워 스킨 적용하고자 한다면 아래 링크에서 다운로드 하실 수 있습니다.

https://sir.kr/g5_skin/61663

댓글이 5개가 넘지 않는다면, 더보기 버튼이 보이지 않으며,

5개가 넘을 시 총 개수가 함께 노출 됩니다.

사용하시는 게시판 스킨 폴더의 view_comment.skin.php 파일을 열어주세요

상단에 css 를 추가 해주세요

단. style.css 에 작성하셔도 무방합니다.

[code]
<style>
.hidden-comment { display: none; }
.load-more-btn {
    display: block;
    width: 100%;
    padding: 15px;
    margin: 20px 0;
    background: #f9f9f9;
    border: 1px solid #ddd;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.load-more-btn:hover {
    background: #f0f0f0;
}
</style>

[/code]

위치를 잘 모르겠다 하시면 아래 스샷 참고 하세요

자 다음에는 아래 코드를 찾아주세요

[code]
<article id="c_<?php echo $comment_id ?>">
[/code]

그리고 아래 처럼 변경 합니다.

[code]
<article id="c_<?php echo $comment_id ?>" class="<?php if($i >= 5) echo 'hidden-comment'; ?>">
[/code]

변경 이니 별도로 스샷은 업로드 하지 않습니다.

자 다음에는 아래 코드를 찾아주세요

[code]
<?php if ($i == 0) { //댓글이 없다면 ?><p id="bo_vc_empty">등록된 댓글이 없습니다.</p><?php } ?>

[/code]

그리고 그 아래에 아래 코드를 추가 합니다.

[code]
    <?php if($cmt_amt > 5) { ?>
    <button type="button" id="load-more-comments" class="load-more-btn" data-current="5" data-total="<?php echo $cmt_amt; ?>">
        더보기 (5/<?php echo $cmt_amt; ?>)
    </button>
    <?php } ?>
[/code]

어디인지 모르겠다? 하시면 스샷 참고 하시길 바랍니다.

마지막으로 맨 하단에 보면 스크립트 댓글 열기를 찾아주세요

[code]
<script>
jQuery(function($) {            
    //댓글열기
    $(".cmt_btn").click(function(e){
        e.preventDefault();
        $(this).toggleClass("cmt_btn_op");
        $("#bo_vc").toggle();
    });
});
</script>
[/code]

그리고 아래 코드를 추가 해주세요

[code]

 var $comments = $('#bo_vc article');
    var $loadMoreBtn = $('#load-more-comments');
    
    $loadMoreBtn.click(function() {
        var current = parseInt($(this).data('current'));
        var total = parseInt($(this).data('total'));
        var next = current + 5;
        var $btn = $(this);
        
        // 다음 5개의 댓글을 보여줌
        $comments.slice(current, next).removeClass('hidden-comment').fadeIn(400, function() {
            // fadeIn 완료 후 실행
            if (next >= total) {
                $btn.fadeOut(200); // 버튼을 부드럽게 사라지게 함
            }
        });
        
        // 더보기 버튼 상태 업데이트
        $btn.data('current', next);
        $btn.text('더보기 (' + Math.min(next, total) + '/' + total + ')');
    });

[/code]

어떻게 넣어야 할지 모르겠다면 아래 스샷을 참고 하세요

실제 구동 영상은 아래와 같습니다.

고맙습니다.