[jQuery] 상품 상세이미지 더보기 접기펼치기 기능 구현 (코드O)

<div id="detail" class="hidden">
 <img src="" alt="상품상세이미지">
</div>
<div class="detailMore">
	<a id="btnMore" href="javascript:moreDetail();">상품정보 더 보기</a>
</div>

<script>
function moreDetail(){
    $('#detail').removeClass('hidden');
    $('.detailMore').remove();
}
</script>

 

#detail{height: 500px;}
#detail.hidden{height: 200px; overflow: hidden;}
a#btnMore{margin: 30px auto; background-color:red; color:white;}
.detailMore{position: relative;}
.detailMore:before {
    content: '';
    position: absolute;
    top: -125px; //맞게 조절
    left: 0;
    display: block;
    width: 100%;
    height: 96px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 66%, rgba(255, 255, 255, 0.94) 83%, rgba(255, 255, 255, 0.98) 91%, #ffffff);
}