Cách tạo nút ‘Đọc thêm / Thu gọn’ bài viết

Hôm nay, có khách hàng yêu cầu mình thêm nút ‘Đọc thêm / Thu gọn’ cho bài viết, mình làm xong rồi, nên muốn chia sẻ lại đoạn code cho bạn cùng tham khảo.

Đoạn văn bản được viết dưới dạng HTML như sau:

<div class="text1">

<span class="teaser">text goes here</span>
<span class="textcomplete"> this is the 
complete text being shown</span>
<span class="textmore">Đọc thêm...</span>
</div>


<div class="text2">

<span class="teaser">text goes here</span>
<span class="textcomplete"> this is the 
complete text being shown</span>
<span class="textmore">Đọc thêm...</span>
</div>

Đoạn CSS

.textcomplete{
    display:none;
}

.textmore{
    background:lightblue;
    color:navy;
    font-size:13px;
    padding:3px;
    cursor:pointer;
}

Cuối cùng là đoạn code jQuery

<script>
jQuery(".text1, .text2").click(function () {

        jQuery(".textmore").toggle(function(){
            jQuery(this).text("Thu gọn..").siblings(".textcomplete").show();    
        }, function(){
            jQuery(this).text("Đọc thêm..").siblings(".textcomplete").hide();    
        });
});
</script>

About Phạm Quốc Toàn

Chủ sáng lập Công ty TNHH Vision Global - công ty quản lý của Webviptop.com (Thiết kế Website và Online Marketing) và Codementor.org (Đào tạo Thiết kế Website cho người mới).

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *