전체댓글 '더보기' 기능 추가 (게시판 댓글 전체, 확장/축소 기능)

01. view.comment.php

아래 위치를 찾아서 class="<?php if($i..  부분 추가

<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="toggle-comments" class="load-more-btn" data-action="expand" data-current="5" data-total="<?php echo $cmt_amt; ?>">
        더보기 (5/<?php echo $cmt_amt; ?>)
    </button>
    <?php } ?>

파일 제일 하단 스크립트 추가

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

    // 댓글 더보기/접기 기능
    const toggleCommentsBtn = $('#toggle-comments');
    const initialDisplayCount = 5; // 초기 표시 댓글 수

    if (toggleCommentsBtn.length) { // 버튼이 존재할 경우에만 작동
        toggleCommentsBtn.on('click', function() {
            const currentAction = $(this).data('action');
            const totalComments = parseInt($(this).data('total'));

            if (currentAction === 'expand') {
                // '더보기' 클릭 시: 모든 숨겨진 댓글 표시
                $('article.hidden-comment').removeClass('hidden-comment').css('display', 'block'); // 'display: block'을 직접 설정하여 확실히 보이게 함
                $(this).text(`간략히 (접기)`).data('action', 'collapse'); // 버튼 텍스트 변경 및 상태 업데이트
            } else {
                // '간략히 (접기)' 클릭 시: 처음 5개 댓글만 남기고 숨기기
                $('article[id^="c_"]').each(function(index) {
                    if (index >= initialDisplayCount) {
                        $(this).addClass('hidden-comment').css('display', 'none'); // 'display: none'을 직접 설정하여 확실히 숨김
                    }
                });
                $(this).text(`더보기 (${initialDisplayCount}/${totalComments})`).data('action', 'expand'); // 버튼 텍스트 변경 및 상태 업데이트
            }
        });
    }

    // 초기 로드 시 5개 이상이면 'hidden-comment' 클래스를 적용하고 숨김
    // 이 부분은 PHP에서 이미 처리하고 있지만, 만약 동적으로 댓글이 추가/제거되는 경우를 대비해
    // jQuery로도 한 번 더 초기 상태를 보장할 수 있습니다.
    $('article[id^="c_"]').each(function(index) {
        if (index >= initialDisplayCount) {
            $(this).addClass('hidden-comment').css('display', 'none');
        }
    });
});
</script>

03. style.css

/* 댓글 더보기 { */
.hidden-comment { display: none; }
.load-more-btn {display: block; width: 100%; padding: 15px; margin: 20px 0; background: #f9f9f9; border: 1px solid #; border-radius:10px; text-align: center; cursor: pointer; transition: all 0.3s ease;}
.load-more-btn:hover {background: #ffffff;}

04. 댓글이 일정 개수(5개)를 2개, 3개, 10개 등으로 수정 하려면 아래 5군데 수정

<?php if($i >= 5) echo 'hidden-comment'; ?>

<?php if($cmt_amt > 5) { ?>

data-current="5" data

더보기 (5/<?php echo $cmt_amt; ?>)

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

.... (중략) ...

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

.... (중략) ...

    const initialDisplayCount = 5; // 초기 표시 댓글 수