Trang chủ

Tạo nút Read More / Read Less (Xem thêm / Ẩn nội dung) cho nội dung quá dài trong wordpress

Để tạo nút Read More / Read Less cho các nội dung dài quá trong website ta dùng cách như sau

HTML

Nội dung cần ẩn hiện ta cần để trong các thẻ như sau

<i class=”dots”>…</i>
<span class=”more-content”>
Nội dung cần ẩn standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</span>
<button class=”read-more”>Read More</button>

CSS

more–content{
   display: none;
}

JS

Cuối cùng là thêm đoạn js sau để ẩn và hiện nội dung khi click vào

jQuery(document).ready(function( $ ){
//$(document).ready(function(){
$(“.read-more”).click(function(){

$(this).siblings(‘.dots’).toggle();
$(this).siblings(‘.more-content’).toggle();

if($(this).text()==’Read More’){

$(this).text(‘Read Less’);
}
else{
$(this).text(‘Read More’);
}
});
});

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 *

0909918607