[jQuery] 높이에 따른 더보기 버튼 유무

[이슈사항]
- 소개하고 싶은 글이 2줄이하일 때는 더보기 버튼이 보이지 않아야합니다.
- 2줄이상일 때는 더보기 버튼이 보여야하며, 더보기버튼 옆 화살표가 아래로 내려가 있는 모양이어야합니다.
- 더보기 버튼이 펼쳐져있을 때는 화살표가 위로 올라가는 모양이어야합니다.



[2줄 이하 일 때 더보기 버튼이 사라지게 하기]
1. 전체를 감싸는 div(infoIntroWrap)의 height를 80px로 설정해줍니다.
2. 소개하는 글의 div ( infoIntro)의 height가 80px보다 작으면 더보기버튼(btnMore)을 지워줍니다.

[2줄 이상일 때 더보기 버튼이 보이게 하기]
-더보기 버튼 클릭 시 -
1. infoIntroWrap의 height가 80px이 넘어가면 보이지 않게 overflow:hidden;을 합니다.
2. 제이쿼리를 사용하여 infoIntroWrap의 max-heigt를 없애고 height를 auto로 바꿔줍니다.
3. p태그에 클래스를 추가하여 max-height를 none으로 바꿔줍니다.
4. 만약에 더보기버튼에 up(화살표) 이라는 클래스가 있다면 infoIntroWrap을 height = 80px, overflow = hidden 처리를 해줍니다.

 

<div class="infoIntroWrap"> 
	<span class="link down btnMore">더보기</span> 
	<div class="infoIntro"> 
    	<p class="more normal">{{ item.getDescription() }}</p>
	</div> 
</div>

.infoIntroWrap { 
    height: 80px; 
    max-height: 9em; 
    overflow: hidden; 
    position: relative;
} 

.infoIntro p{
    line-height: 2.5em; 
    font-size: 14px; 
    font-weight: 500; 
    word-break: break-all; 
    text-align: justify; 
    margin-bottom: 30px; 
    /*overflow: hidden;*/ 
    text-overflow: ellipsis; 
    -ms-text-overflow: ellipsis; 
    white-space: normal; 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    letter-spacing: -0.5px; 
} 

.infoIntro p.more.readMore{ 
    max-height: none; 
    -webkit-line-clamp: none;
    margin-bottom: 0; 
} 

.infoIntroWrap span{ 
    position: absolute; 
    bottom: 0; 
    right: 18px; 
    cursor: pointer; 
} 

.infoIntroWrap span.down:after{ 
    content:''; 
    position: absolute; 
    top: 0; left:45px; 
    width: 10px; 
    height: 6px; 
    margin-top: 5px; 
    background: url('/assets/images/tokensensus/icon/dropDown_small.png') center center no-repeat; 
 } 
 
.infoIntroWrap span.up:after{ 
    content:''; 
    position: absolute; 
    top: 0; 
    left:45px; 
    width: 10px; 
    height: 6px; 
    margin-top: 5px; 
	background: url('/assets/images/tokensensus/icon/dropUp_small.png') center center no-repeat; 
}

 $(".btnMore").click(function(e) { 
   	e.preventDefault(); 
 	$(this).parent().css('overflow', 'visible')
 	$(this).parent().css('max-height','none'); 
	 $(this).parent().css('height','auto'); 
 	$(this).find('.infoIntro > p').toggleClass('readMore'); 
 	if ($(this).hasClass('up')){
 		$(this).parent().css('overflow', 'hidden')
 		$(this).parent().css('height', '80px') 
  } 
 	$(this).toggleClass('down').toggleClass('up'); 
    
 }); 
    
    
 $(document).ready(function () { 
 	$(".infoIntroWrap").each(function() { 
 	var height = 80; 
    console.log($(this).find('.infoIntro').height()); 
 	if ( $(this).find('.infoIntro').height() < height) {
    $(this).find('.btnMore').remove();    
	} 
    
});

[구현된 화면]

2줄이상일때 더보기 버튼 보이기

2줄이하일때 더보기 버튼이 없음