[jQuery] 더보기 / 접기 구현하기

 

 

<style>
    .box {margin:20px auto;}
    .content {
        width:800px;
        padding:10px;
        border:1px solid #ddd;
    }
 
</style>
 
<div class="box">
    <div class="content">
        <span>글쓴이 : 강감찬</span>
        <div class="contentStr">오늘은 조은날 고고싱<br>동해물과 백두산이 마르고 닳도록</div>
    </div>
</div>
 
 
<div class="box">
    <div class="content">
        <span>글쓴이 : 이순신</span>
        <div class="contentStr"></div>
    </div>
</div>

 

 

<script text="javascript/text">
    $(document).ready(function(){
 
        $('.box').each(function(){
            //var content = $(this).children('.content');
            var content = $(this).find('.contentStr');
 
            var content_txt = content.text();
            var content_html = content.html();
            var content_txt_short = content_txt.substring(0,100)+"...";
            var btn_more = $('<a href="javascript:void(0)" class="more">더보기</a>');
 
            
            $(this).append(btn_more);
            
            if(content_txt.length >= 100){
                content.html(content_txt_short)
                
            }else{
                btn_more.hide()
            }
            
            btn_more.click(toggle_content);
            function toggle_content(){
                if($(this).hasClass('short')){
                    // 접기 상태
                    $(this).html('더보기');
                    content.html(content_txt_short)
                    $(this).removeClass('short');
                }else{
                    // 더보기 상태
                    $(this).html('접기');
                    content.html(content_html);
                    $(this).addClass('short');
 
                }
            }
        });
    });
  </script>

 

참고 : moollang.tistory.com/8