팁과노하우

2025.02.24 12:59

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

안녕하세요...

미니님a입니다.


개선 및 제안 게시판 내 해당 요청이 있어 간단하게 팁으로 만들었습니다.

https://rebuilder.co.kr/propose/771


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

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

277279c4b1a54cd7df2beb02f3ea4ffe_1740369666_5934.png
 

만약 스킨으로 적용하고자 한다면 아래 링크를 통해 다운로드 할 수 있습니다.

https://rebuilder.co.kr/userdata/393



기본 / 통합 모두 적용 가능합니다.


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

만약 통합이라면 사용하시는 게시판 스킨 폴더 내 cmt/basic/skin.php 파일을 열어주세요


그 이후 똑같이 쓰시면 됩니다.


상단에 css 를 추가 해주세요

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



<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>


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


277279c4b1a54cd7df2beb02f3ea4ffe_1740368756_5214.png
 


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



<article id="c_<?php echo $comment_id ?>">


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



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


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


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



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


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



    <?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 } ?>


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


277279c4b1a54cd7df2beb02f3ea4ffe_1740368943_8231.png
 




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

단. 통합의 경우는 해당 파일이 아닌 통합 스킨폴더 내 view_comment.skin.php 에 아래 내용이 있습니다.



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

여기에 아래 코드만 추가만 해주시면 됩니다.

 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 + ')');
    });
어떻게 넣어야 할지 모르겠다면 아래 스샷을 참고 하세요

277279c4b1a54cd7df2beb02f3ea4ffe_1740369193_7184.png
실제 구동 영상은 아래와 같습니다.
고맙습니다.

277279c4b1a54cd7df2beb02f3ea4ffe_1740369315_3727.gif
 



  • 공유링크 복사
    미니홈 쪽지 구독하기
    구독하고 알림받기

    댓글목록

    profile_image
    no_profile 기기괴괴미니홈 1:1 대화하기  오래 전

    훔... 통합게시판에 왜 적용이 안될까용

    2025-03-04 23:32

    profile_image
    미니님a미니홈 1:1 대화하기  오래 전

    스킨 자료실에 통합 게시판용으로 별도로 업로드 해 두었습니다.
    소스를 팁 게시판과 소유하신 소스 비교해보시면 좋을 것 같습니다.

    2025-03-05 09:13

    profile_image
    no_profile 기기괴괴미니홈 1:1 대화하기  오래 전

    오... cmt/basic/ 여기가아닌 cmt/basic.file/ 여기에서 수정하니 됩니다.. 감사합니다 소금장수님

    2025-03-05 22:38

    profile_image
    no_profile 민트다이어리미니홈 1:1 대화하기  오래 전

    좋은 기능입니다. 감사합니다. ^^

    2025-03-05 09:22

구매 신청
  • 구매문의 : cs@rebuilder.co.kr / 010-6466-3355
    신청 이후 담당자가 개별연락 드리고 있습니다.
    입금자명과 실제 입금자가 동일한 경우 자동처리 됩니다.
  • 결제예정 금액 : 0 (VAT별도)
    하나은행(KOEXKRSE) : 258-910104-00407 / 김은정(인덱스)

  •