댓글 내용 확장/축소 기능 (댓글 자세히보기 및 접기 기능)
댓글 출력 부분을 아래와 같이 변경, 아래 기준 댓글 글자수 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;
}