animate()를 이용해 height auto 효과주기

해당 예제 적용해보시고 커스텀 하세요~!

​

<style>
.notice_ul {}
.notice_ul li {background:#fff;border-bottom:1px solid #E6E6E6;}
.nt_list {padding:30px 30px 30px 15px;position:relative;}
.nt_box {display:inline-block;max-width:100%;position:relative;}
.nt_box h3 {font-size:15px;line-height:1.3;font-weight:500;}
.nt_date {font-size:13px;line-height:1.1;color:#B5B5B5;margin-top:8px;}
.nt_view {overflow:hidden;height:0;}
.nt_view_wrap {font-size:13px;line-height:23px;padding:30px 15px;background:#F8F8F8;border-top:1px solid #E6E6E6;}
</style>


<ul class="notice_ul">
    <li>
        <div class="nt_list on">
            <div class="nt_box">
                <h3>클릭을 할 부분입니다.</h3>
            </div>
            <p class="nt_date">2022.03.11</p>
        </div>
        <div class="nt_view">
            <div class="nt_view_wrap">이벤트가 발생되어 보여지는 영역.</div>
        </div>
    </li>
    <li>
        <div class="nt_list on">
            <div class="nt_box">
                <h3>클릭을 할 부분입니다.</h3>
            </div>
            <p class="nt_date">2022.03.11</p>
        </div>
        <div class="nt_view">
            <div class="nt_view_wrap">이벤트가 발생되어 보여지는 영역.</div>
        </div>
    </li>
</ul>


<script>
$('.nt_list').on('click', function(){
    var open = $(this).next('.nt_view').height();
    var el = $(this).next('.nt_view'),
    	curHeight = el.height(),
    	autoHeight = el.css('height', 'auto').height();

    if( open === 0 ){
        $(this).parent().siblings().children(".nt_list").removeClass("on");
        $(this).parent().siblings().children(".nt_view").animate({height: 0}, 300);
        $(this).addClass("on");
        el.height(curHeight).animate({height: autoHeight}, 300);
    }else{
        $(this).removeClass("on");
        el.animate({height: 0}, 300);
    }
});
</script>