동의하기 내용 펼쳐보기

<style> 

.agreeBox{width:100%; height:160px; overflow-y:auto; overflow-x:hidden;}

</style> 

 

<script type="text/javascript"> 

$(function(){

    $(".agreeWrap ul li.btn a").bind("click focusin",function(){
        $(".agreeBox").css("height","160px"); // 모든 .agreeBox는 기본값 160으로
        $(this).parent().parent().siblings(".agreeBox").css("height","auto");  // 누른 버튼의 ​agreeBox만 전체 펼쳐보이기
        return false; 

    });
});

</script>

 

 

<div class="agreeWrap">

    <h3>개인정보 취급방침</h3> 

    <div class="agreeBox">

        동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용

        동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용

        ..........이하내용 생략

    </div>

    <ul>

        <li class="chk">

             <input type="checkbox" id="agree1" name="agree1" value="Y" /><label for="agree1">이용약관에 동의합니다.</label>
        </li> 

        <li class="btn"><a href="#">펼쳐보기</a></li>

    </ul> 

</div>

 

 

<div class="agreeWrap">

    <h3>이메일 무단수집거부</h3> 

    <div class="agreeBox">

        동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용

        동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용동의내용

        ..........이하내용 생략

    </div>

    <ul>

        <li class="chk">

             <input type="checkbox" id="agree2" name="agree2" value="Y" /><label for="agree2">이용약관에 동의합니다.</label>
        </li> 

        <li class="btn"><a href="#">펼쳐보기</a></li>

    </ul> 

</div>