댓글이 2줄 이상일 경우 접고 펴는 기능추가하기

게시글에 댓글이 여러줄로 달릴 경우 댓글란들이 길게 나열되는 것이 싫어실 경우 적용하시면 됩니다.

 

sketchbook5 게시판을 예로 해서 설명합니다.

 

1. 게시판설정에서 게시판별로 해당 기능을 켜고 끄게 만듭니다.

아래 코드를 skin.xml의  적당한 곳에 추가합니다.

<var name="cmt_line_use" type="radio">
<title xml:lang="ko">댓글 한줄 출력</title>
<description xml:lang="ko">댓글이 2줄 이상일때 펼쳐보기 메뉴 출력</description>
<options value="">
<title xml:lang="ko">미출력(기본)</title>
</options>
<options value="Y">
<title xml:lang="ko">출력</title>
</options>
</var>
<var name="cmt_line_no" type="text">
<title xml:lang="ko">　┖ 댓글 출력 라인수</title>
<description xml:lang="ko">댓글 출력 라인수(기본 1줄)</description>
</var>
<var name="cmt_line_h" type="text">
<title xml:lang="ko">　┖ 댓글 출력 칸높이</title>
<description xml:lang="ko">댓글 출력 각 칸의 높이를 지정합니다. (기본 1.5em)</description>
</var>

 

2. _comment.html의 상단부분에 아래 코드 추가 - style 과 script 

<!--// 댓글 줄수 설정 -->
<block cond="!$mi->cmt_line_no">{@ $mi->cmt_line_no = '1'}</block>
<block cond="!$mi->cmt_line_h">{@ $mi->cmt_line_h = '1.5'}</block>
<style cond="$mi->cmt_line_use=='Y'">
.commentbox{ overflow:hidden; }
.commentbox .xe_content{ margin-top:0px; }
.commentbox .xe_content.hiddenComment p,
.commentbox .xe_content.hiddenComment{ float:left; width:80%; overflow:hidden; text-overflow: ellipsis; -webkit-line-clamp:{$mi->cmt_line_no}; line-height:{$mi->cmt_line_h}em; height: {$mi->cmt_line_h*$mi->cmt_line_no}em; }
.commentbox .xe_content.hiddenComment p{ width:100%; }
.btn-moreComment{ display:none; white-space:nowrap; float:right; margin-top:0px; }
.btn-moreComment.hidden {display:none !important;}
.btn-closeComment{ display:none; white-space:nowrap; float:right; margin-top:0px; }
.btn-closeComment.active{ display:inline-block; }
@media screen and (max-width: 533px){
.commentbox .xe_content.hiddenComment{ width:60%; }
}
</style>
<script cond="$mi->cmt_line_use=='Y'">
   jQuery(function ($) {
      var commentbox = $('.commentbox .xe_content');
      commentbox.each( function() {
         $( this ).outerHeight();
         if( $(this).outerHeight() > 22*{$mi->cmt_line_no} ){
            $(this).addClass('hiddenComment');
            var btnMoreCmt = $(this).siblings('.btn-moreComment');
            btnMoreCmt.show();
            btnMoreCmt.on("click",function(){
               $(this).siblings('.xe_content').removeClass('hiddenComment');
               $(this).siblings(".btn-closeComment").addClass("active");
               $(this).addClass("hidden");
            });
            //코멘트 닫기
            var btnCloseCmt = $(this).siblings('.btn-closeComment');
            btnCloseCmt.on("click",function(){
               $(this).removeClass("active");
               $(this).siblings('.xe_content').addClass('hiddenComment');
               btnMoreCmt.removeClass("hidden");
               
            });
         }
      } );
   });
</script>

 

3. _comment.html내의 댓글부분 - {$comment->getContent(false)}아래에 코드 추가

<div class="commentbox">
{$comment->getContent(false)}
<div cond="$mi->cmt_line_use=='Y'" class="btn-moreComment sbtn_small sbtn-gray"><i class="fas fa-angle-double-down"></i> 펼치기</div>
<div cond="$mi->cmt_line_use=='Y'" class="btn-closeComment sbtn_small sbtn-gray"><i class="fas fa-angle-double-up"></i> 접기</div>
</div>

 

p.s sbtn_small sbtn-gray 부분과 폰트어썸 아이콘은  웹폰드 에드온을 사용했습니다.