사이트 활용팁

2025.06.06 09:02

댓글 내용 확장/축소 기능 (댓글 자세히보기 및 접기 기능)

01. 댓글 내용 확장/축소 기능 요약
이 코드는 웹페이지의 댓글 표시 방식을 개선하여, 긴 댓글 내용을 효율적으로 보여주고 숨기는 기능을 제공합니다. 특정 길이 이상의 댓글은 처음에 일부만 보여주고, 사용자가 원할 때 전체 내용을 볼 수 있도록 \"자세히보기\" 및 \"접기\" 버튼을 활용합니다.


02. 주요기능
댓글 길이 감지: $is_long_comment 변수를 사용하여 댓글이 특정 길이(여기서는 82자)를 초과하는지 확인합니다.
짧은 버전 표시: 댓글이 길 경우, 처음에는 82자까지만 표시하고 뒤에 \"...\" 을 붙여 간략하게 보여줍니다. 이 부분은 comment-content-short div에 해당합니다.
전체 버전 숨김: 긴 댓글의 전체 내용은 comment-content-full div에 담겨 있으며, 초기에는 숨겨져 있습니다.
\"자세히보기\" 버튼: 짧은 버전 댓글 아래에 위치하며, 클릭 시 숨겨진 전체 댓글 내용을 보여주고 자신은 사라집니다. 동시에 \"접기\" 버튼을 나타나게 합니다.
접기\" 버튼: \"자세히보기\" 버튼 클릭 후 나타나며, 클릭 시 전체 댓글 내용을 다시 숨기고 짧은 버전 댓글과 \"자세히보기\" 버튼을 다시 보여줍니다.
비밀 댓글 처리: secret 옵션이 적용된 댓글의 경우, 내용 앞에 비밀글 아이콘(ico_sec.svg)을 표시합니다.
첨부 파일 표시: 댓글에 첨부된 이미지 및 일반 파일(압축 파일 등)을 표시합니다. 비밀 댓글의 경우 특정 조건(관리자, 작성자 등)에서만 첨부 파일을 볼 수 있습니다.

03. 이 기능은 JavaScript 함수 expandComment()와 collapseComment()를 통해 구현됩니다. 사용자가 \"자세히보기\" 버튼을 클릭하면 expandComment() 함수가 실행되어 짧은 내용(short_)을 숨기고 전체 내용(full_)을 보여주며, 버튼의 가시성을 변경합니다. 반대로 \"접기\" 버튼을 클릭하면 collapseComment() 함수가 실행되어 전체 내용을 숨기고 짧은 내용을 다시 보여주며, 버튼 가시성을 조절합니다. 각 댓글은 고유한 comment_id를 사용하여 개별적으로 제어됩니다.

04. 대상 파일
view_comment.skin.php
style.css
0.1 view_comment.skin.php

댓글 출력 부분을 아래와 같이 변경, 아래 기준 댓글 글자수 82자 이상 일 경우 ... 자세히보기 버튼 생성

82자 보다 이하 일 경우, 즉 짧은 댓그은 그대로 표시

	        <!-- 댓글 출력 -->
	        <div class="cmt_contents">
	            <div class="comment-content-wrapper">
	                <?php if ($is_long_comment) { ?>
	                    <!-- 짧은 버전 -->
	                    <div class="comment-content-short" id="short_<?php echo $comment_id ?>">
	                        <p>
	                            <?php if (strstr($list[$i]['wr_option'], "secret")) { ?><img src="<?php echo $board_skin_url; ?>/img/ico_sec.svg" alt="비밀글"><?php } ?>
	                            <?php 
	                            // 82자까지만 표시하고 ...을 추가
	                            $short_comment = mb_substr($comment_text_only, 0, 82, 'UTF-8');
	                            echo nl2br(htmlspecialchars($short_comment)) . '...';
	                            ?>
	                        </p>
	                    </div>
	                    
	                    <!-- 전체 버전 -->
	                    <div class="comment-content-full" id="full_<?php echo $comment_id ?>">
	                        <p>
	                            <?php if (strstr($list[$i]['wr_option'], "secret")) { ?><img src="<?php echo $board_skin_url; ?>/img/ico_sec.svg" alt="비밀글"><?php } ?>
	                            <?php echo $comment ?>
	                        </p>
	                    </div>
	                    
	                    <!-- 자세히보기 버튼 -->
	                    <button type="button" class="comment-expand-btn" onclick="expandComment('<?php echo $comment_id ?>')">
	                        자세히보기
	                    </button>
	                    
	                    <!-- 접기 버튼 -->
	                    <button type="button" class="comment-collapse-btn" onclick="collapseComment('<?php echo $comment_id ?>')" style="display:none;">
	                        접기
	                    </button>
	                    
	                <?php } else { ?>
	                    <!-- 짧은 댓글은 그대로 표시 -->
	                    <p>
	                        <?php if (strstr($list[$i]['wr_option'], "secret")) { ?><img src="<?php echo $board_skin_url; ?>/img/ico_sec.svg" alt="비밀글"><?php } ?>
	                        <?php echo $comment ?>
	                    </p>
	                <?php } ?>
	            </div>
	            
	            <?php if($is_comment_reply_edit) {
	                if($w == 'cu') {
	                    $sql = " select wr_id, wr_content, mb_id from $write_table where wr_id = '$c_id' and wr_is_comment = '1' ";
	                    $cmt = sql_fetch($sql);
                        if (isset($cmt)) {
                            if (!($is_admin || ($member['mb_id'] == $cmt['mb_id'] && $cmt['mb_id']))) {
                                $cmt['wr_content'] = '';
                            }
                            $c_wr_content = $cmt['wr_content'];
                        }
	                }
				?>            
	            <?php } ?>
	            
                <!-- 댓글 추천/비추천 -->
                <p class="p_times" style="margin-bottom:10px;"><span><?php echo date('Y-m-d H:i', strtotime($list[$i]['datetime'])) ?></span></p>
	            
                <div>
                <?php
                    //비밀글의 경우 첨부파일을 숨김
                    $file_v = get_file_comment($bo_table, $wr_id, $comment_id);
        
                    if (!strstr($list[$i]['wr_option'], 'secret') || $is_admin || ($write['mb_id']===$member['mb_id'] && $member['mb_id']) || ($list[$i]['mb_id']===$member['mb_id'] && $member['mb_id'])) {

                        for($j=0; $j<count($file_v); $j++){
                            if (isset($file_v[$j]['file']) && preg_match("/\.({$config['cf_image_extension']})$/i", $file_v[$j]['file'])) {
                                echo '<a data-fslightbox="gallery_'.$comment_id.'" href="'.$file_v[$j]['path'].'/'.$file_v[$j]['file'].'"><img src="'.$file_v[$j]['path'].'/'.$file_v[$j]['file'].'" style="width:auto;height:60px;border-radius:6px; margin-right:5px; margin-top:5px;"></a>';
                            }
                        }

                        if (count($file_v) > 0) {
                            echo '<div class="rb_bbs_file rb_bbs_file_cmt">';
                            for($k=0; $k<count($file_v); $k++){
                                if (isset($file_v[$k]['file']) && !preg_match("/\.({$config['cf_image_extension']})$/i", $file_v[$k]['file'])) {
                                    $finfo = pathinfo($file_v[$k]['source']);
                                    echo  "<ul class='rb_bbs_file_for rb_bbs_file_for_cmt'><span><i><img src='".$board_skin_url."/img/ico_file.svg'></i><a href='".$file_v[$k]['href']."' class=''>".$file_v[$k]['source']."</a> (".$file_v[$k]['size'].")　".$file_v[$k]['download']."회</span></ul>";
                                }
                            }
                            echo '</div>';
                        }
                    
                        
                    } else {
                        $ss_name = 'ss_secret_comment_'.$bo_table.'_'.$list[$i]['wr_id'];

                        if(!get_session($ss_name)) {
                            
                        } else {
                            
                            for($j=0; $j<count($file_v); $j++){
                                if (isset($file_v[$j]['file']) && preg_match("/\.({$config['cf_image_extension']})$/i", $file_v[$j]['file'])) {
                                    echo '<a data-fslightbox="gallery_'.$comment_id.'" href="'.$file_v[$j]['path'].'/'.$file_v[$j]['file'].'"><img src="'.$file_v[$j]['path'].'/'.$file_v[$j]['file'].'" style="width:auto;height:60px;border-radius:6px; margin-right:5px; margin-top:5px;"></a>';
                                }
                            }

                            if (count($file_v) > 0) {
                                echo '<div class="rb_bbs_file rb_bbs_file_cmt">';
                                for($k=0; $k<count($file_v); $k++){
                                    if (isset($file_v[$k]['file']) && !preg_match("/\.({$config['cf_image_extension']})$/i", $file_v[$k]['file'])) {
                                        $finfo = pathinfo($file_v[$k]['source']);
                                        echo  "<ul class='rb_bbs_file_for rb_bbs_file_for_cmt'><span><i><img src='".$board_skin_url."/img/ico_file.svg'></i><a href='".$file_v[$k]['href']."' class=''>".$file_v[$k]['source']."</a> (".$file_v[$k]['size'].")　".$file_v[$k]['download']."회</span></ul>";
                                    }
                                }
                                echo '</div>';
                            }
                            
                        }
                    }
                ?>
                </div>
                
	        </div>
	        <span id="edit_<?php echo $comment_id ?>" class="bo_vc_w"></span><!-- 수정 -->
	        <span id="reply_<?php echo $comment_id ?>" class="bo_vc_w"></span><!-- 답변 -->
	
	        <input type="hidden" value="<?php echo strstr($list[$i]['wr_option'],"secret") ?>" id="secret_comment_<?php echo $comment_id ?>">
	        <textarea id="save_comment_<?php echo $comment_id ?>" style="display:none"><?php echo get_text($list[$i]['content1'], 0) ?></textarea>
		</div>

 

02. view_comment.skin.php 파일 맨 하단에 아래 스크립트 추가

<!-- 댓글 자세히보기/접기 스크립트 -->
<script>
function expandComment(commentId) {
    // 짧은 버전 숨기기
    document.getElementById('short_' + commentId).style.display = 'none';
    // 전체 버전 보이기
    document.getElementById('full_' + commentId).style.display = 'block';
    
    // 자세히보기 버튼 숨기기
    var expandBtn = document.querySelector('#c_' + commentId + ' .comment-expand-btn');
    if (expandBtn) expandBtn.style.display = 'none';
    
    // 접기 버튼 보이기
    var collapseBtn = document.querySelector('#c_' + commentId + ' .comment-collapse-btn');
    if (collapseBtn) collapseBtn.style.display = 'inline-block';
}

function collapseComment(commentId) {
    // 전체 버전 숨기기
    document.getElementById('full_' + commentId).style.display = 'none';
    // 짧은 버전 보이기
    document.getElementById('short_' + commentId).style.display = 'block';
    
    // 접기 버튼 숨기기
    var collapseBtn = document.querySelector('#c_' + commentId + ' .comment-collapse-btn');
    if (collapseBtn) collapseBtn.style.display = 'none';
    
    // 자세히보기 버튼 보이기
    var expandBtn = document.querySelector('#c_' + commentId + ' .comment-expand-btn');
    if (expandBtn) expandBtn.style.display = 'inline-block';
}
</script>

 

03. style.css

/* 댓글 자세히보기/접기 스타일 */
.comment-content-wrapper {
    position: relative;
}

.comment-content-short {
    max-height: 110px; /* 약 3-4줄 정도 */
    overflow: hidden;
    position: relative;
}

.comment-content-short::after { /* 밑에서 위로 그라데이션 */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
    pointer-events: none;
}

.comment-expand-btn, .comment-collapse-btn {
    display: inline-block;
    color: #777;    
    font-size: 13px;
    font-weight:bold;
    cursor: pointer;
    margin-top: 7px;
    padding: 2px 0;
    border: none;
    background: none;
    text-decoration: none;
}

.comment-expand-btn:hover, .comment-collapse-btn:hover {
    color: #333;
    text-decoration: underline;
}

.comment-content-full {
    display: none;
}

.comment-content-full.show {
    display: block;
}

 

#댓글 #접기 #자세히보기 #간략히 #comment #view_comment.skin #댓글접기 #댓글간략히 #댓글자세히보기 #댓글확장 #댓글축소 #댓글기능 #댓글내용
    0 0
    공유 더보기
    페이스북으로 공유 트위터로 공유 카카오톡으로 공유 공유링크 공유
    더보기
소개 공유하고, 소통하다

빌런은 디스코드, 인스타그램, 페이스북, 카카오톡, 텔레그램 등 다양한 메신저에서 발생하는 범죄, 사기, 보이스피싱, 스캠과 함께 중고 거래, 데이트 폭력, 학교 폭력, 술집 진상, 게임 사기꾼, 나쁜 회사 상사, 일상 속 매너 없는 사람들에 대한 정보를 공유하는 플랫폼입니다. ... 자세히보기


또한, 한국 아이돌, 배우, 해외 유명인, 스포츠 스타, 인플루언서에 대한 팬클럽 게시판도 운영하여, 좋아하는 스타와 소통할 수 있는 공간을 제공합니다. 안전한 커뮤니티에서 우리의 경험을 나누고, 더 나은 사회를 만들어 갑시다. ... 접기
저작권 저작권 저작권 주의사항.

본 사이트의 모든 게시물과 그에 포함된 텍스트, 이미지, 동영상 등 모든 콘텐츠는 본 사이트에서 독자적으로 편집 및 표현 방식을 수정하여 완성된 창작물입니다. 저작권법 및 관련 법령에 따라 보호를 받습니다. 따라서, 본 정보는 사이트 운영자의 명시적인 서면 동의 없이 무단으로 전재, 복사, 배포, 재가공, 또는 어떠한 형태로든 상업적/비상업적으로 활용될 수 없습니다. ... 자세히보기


또한, 게재된 정보는 개인적인 열람 및 참고 이외의 어떠한 용도로도 사용할 수 없습니다. 이를 위반할 경우 관련 법률에 의거하여 민·형사상의 책임을 질 수 있습니다.


본 사이트는 등록자가 게재한 자료의 내용에 대한 정확성, 완전성, 신뢰성을 보증하지 않으며, 해당 정보의 오류나 누락에 대해 어떠한 책임도 지지 않습니다. 또한, 사용자가 본 정보를 신뢰하여 취한 직간접적인 모든 조치나 결과에 대해서도 책임을 부담하지 않습니다. 정보 사용에 따른 모든 위험은 사용자 본인에게 있습니다. ... 접기
  • 이전글본문 하단, 자세히보기 및 접기 버튼 기능 설명2025.06.06
  • 다음글현재 접속자, 아이피 아래 국가/도시 이름으로 표시하기2025.05.30

    • 댓글목록

    profile_image
    관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 　1일 전 2025-06-06 09:03

    현재 댓글 생성 서비스를 이용할 수 없습니다.

    0 0

    여기에 답글

    profile_image
    관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 　1일 전 2025-06-06 09:03

    현재 댓글 생성 서비스를 이용할 수 없습니다.

    0 0

    여기에 답글

    profile_image
    관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 　1일 전 2025-06-06 09:03

    현재 댓글 생성 서비스를 이용할 수 없습니다.

    0 0

    여기에 답글

    profile_image
    관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 　1일 전 2025-06-06 09:03

    현재 댓글 생성 서비스를 이용할 수 없습니다.

    0 0

    여기에 답글

    profile_image
    관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 　1일 전 2025-06-06 09:03

    현재 댓글 생성 서비스를 이용할 수 없습니다.

    0 0

    여기에 답글

    profile_image
    관리자미니홈 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 　1일 전 2025-06-06 09:03

    현재 댓글 생성 서비스를 이용할 수 없습니다.

    0 0

    여기에 답글