jQuery 더 읽기/닫기(Read More/Less) 토글

더 읽기(Read More) 버튼을 클릭하면 전체 텍스트가 표시되면서 닫기(Less) 버튼이 표시되도록 하는 jQuery 예시입니다.

jQuery 더 읽기/닫기(Read More/Less) 토글

HTML 코드:

<div class="blog-item">
    <p>청춘 하여도 노래하며 할지니, 피어나기 가슴에 피가 운다. 수 같이, 원대하고, 피다. 귀는 생생하며, 용감하고 인간에 풀밭에 이상, 봄바람이다. </p>
    <div class='fulltext'><p>거친 이 없으면 석가는 노년에게서 싸인 그러므로 지혜는 부패뿐이다. 피가 석가는 있는 뭇 자신과 것이다. 가치를 인간에 타오르고 사라지지 이성은 풀이 충분히 찾아 피다. 있는 천지는 같지 끓는 소금이라 사막이다.</p><p>모래뿐일 얼음이 끝에 있는가? 거친 천고에 위하여서, 피가 예가 품에 그들의 몸이 작고 있는가? 구하기 전인 가는 사랑의 싸인 그러므로 것은 끓는다.</p></div>
    <a class="readmore" href="#">Read more...</a>
</div>
<br><br>

<div class="blog-item">
    <p>얼마나 곳이 실로 고동을 피가 영원히 그들에게 하는 피에 것이다. 원질이 더운지라 이것은 황금시대를 위하여, 약동하다. </p>
    <div class='fulltext'><p>스며들어 피가 평화스러운 오직 영락과 듣는다. 이 따뜻한 풀이 대한 끓는 사막이다. 앞이 눈이 사라지지 이성은 뜨고, 광야에서 피어나기 우리 우리 듣는다.</p></div>
    <a class="readmore" href="#">Read more...</a>
</div>

jQuery 코드:

$(document).ready(function () {
    $('.fulltext').hide();

    $('.blog-item .readmore').click(function (event) {
        event.preventDefault();
        $(this).parent().find('.fulltext').slideToggle('slow');
        $(this).text($(this).text() == 'Read less...' ? 'Read more...' : 'Read less...');
    });
});

CSS 코드:

div.blog-item p {
    margin:0 0 1.5em
}

위의 코드는 다음 Stackoverflow 글을 참조했습니다.

• jQuery Read More/Read Less appended after full text for Read Less state only (Read Less 상태에 대해서만 전체 텍스트 다음에 Read More/Read less 추가되는 JQuery)

다른 예시로 다음과 같은 jQuery 코드도 있습니다.

• https://codepen.io/maxds/pen/WNrvZY

상기 Codepen 코드는 전체 텍스트 중 특정 길이의 요약문만 표시하고 Read More(더 읽기)를 누르면 전체가 표시되고 Read Less(접기) 링크가 표시됩니다.

마치며

워드프레스를 사용하는 경우 엘리멘터(Elementor)와 같은 페이지 빌더를 사용하거나 아바다 테마를 사용하는 경우 토글/아코디언 엘리먼트를 사용하여 FAQ 같은 기능을 수월하게 구현할 수 있습니다.

엘리멘터(Elementor) 토글 위젯과 아코디언 위젯 차이점

참고

https://avada.tistory.com/2828

텍스트 입력 상자에 숫자와 하이픈만 입력 허용하기