[JQUERY] readmore-js 더보기 기능 개발하기

글이 너무 긴 경우, 글의 일부를 숨기고 더보기 버튼을 클릭하여 볼 수 있도록 개발하는 경우가 있습니다.

저는 readmore-js 라는 JQuery Plugin을 이용했습니다.

 

---

 

1. readmore-js 다운로드 및 세부 사용방법은 아래 링크를 참조해주세요.

Readmore.js - JavaScriting

Readmore.js - JavaScripting

 

 

2. readmore-js 스크립트 경로 추가

<script src="/readmore-js/readmore.min.js"></script>

 

 

3. HTML 코드 예제

<div class="readmore">

    글입니다.글입니다.글입니다.
    글입니다.글입니다.글입니다.
    글입니다.글입니다.글입니다.
    
</div>

- class명을 readmore로 만들었습니다.

 

 

4. js 코드 예제

$(function () {

    $('.readmore').readmore({
    
        blockCSS: 'display: block; width: 250px;',
        collapsedHeight: 18,
        moreLink: '<a href="#" class="more">더보기 <i class="ion-arrow-down-b"></i></a>',
        lessLink: '<a href="#" class="more">닫기 <i class="ion-arrow-up-b"></i></a>'
        
    });
    
});

 

- blockCSS로 스타일을 넣을 수 있고, 보여질 글의 높이를 collapseHeight로 설정할 수 있습니다.

- moreLink는 더보기 버튼, lessLink는 더보기 글을 닫는 버튼입니다.

 

 

5. 예제 실행 화면

 

- 더보기 클릭 전 / 닫기 클릭 후

더보기 클릭 전 / 닫기 클릭 후

 

- 더보기 클릭 후

더보기 클릭 후

 

 

 

이상으로 JQuery readmore-js 를 이용하여 더보기 기능을 개발해보았습니다.

 

---