내용 더보기 채택완료

<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>