Read More

Read More expands full text and "Read More" turns to "Read Less" and is positioned at the end of the full text.

by learningforever

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>

CSS

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

JavaScript

$(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...');
    });
});