내용 더보기
본문
게시물 내용을 div 태그로 높이 2~300정도로 고정하고 더보기 버튼 을 통해 늘리고 싶은데
관련 코드를 알 수 있을까요?
검색해도 게시물 리스트내용만 나와서 찾기가 힘드네요..
답변 1
<style>
.contentwrap {
width: 500px;
}
#contentbox {
height: 200px;
border: 1px solid gray;
overflow: auto;
}
.contentwrap .btns {
text-align: right;
}
.contentwrap .btn_less {
width: 2.0em;
}
.contentwrap .btn_more {
width: 2.0em;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
const contentbox_min = 200;
const contentbox_per = 50;
const contentbox_max = 600;
let contentbox_h = $('#contentbox').height();
$('.btn_less').on('click', function () {
contentbox_h = Math.min(Math.max(contentbox_min, contentbox_h - contentbox_per), contentbox_max);
$('#contentbox').height(contentbox_h);
});
$('.btn_more').on('click', function () {
contentbox_h = Math.min(Math.max(contentbox_min, contentbox_h + contentbox_per), contentbox_max);
$('#contentbox').height(contentbox_h);
});
});
</script>
<div class="contentwrap">
<div id="contentbox">
123<br />123<br />123<br />123<br />123<br />
123<br />123<br />123<br />123<br />123<br />
123<br />123<br />123<br />123<br />123<br />
123<br />123<br />123<br />123<br />123<br />
123<br />123<br />123<br />123<br />123<br />
</div>
<div class="btns">
<button class="btn_less" title="less">-</button>
<button class="btn_more" title="more">+</button>
</div>
</div>
답변을 작성하시기 전에 로그인 해주세요.
