Để 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
|
1 2 3 4 5 6 |
Lorem Ipsum is simply dummy text of the printing and typesetting industry <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> |
Chúng ta dùng css như sau để ẩn các nội dung ban đầu
CSS
|
1 2 3 |
.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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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'); } }); }); |
Nâng cao
Để tiện hơn trong khi sử dụng chúng ta sẽ biến các tag html thành shortcode để khi cần ẩn nội dung chúng ta chỉ cần gọi shortcode ra mà thôi, chúng ta tạo shortcode như sau trong function.php
|
1 2 3 4 5 |
// Codfe.com Tạo hàm nút readmore function cf_readmore($args, $content){ return '<i class="dots">...</i><span class="more-content">'.$content.'</span><button class="read-more">Read More</button>'; } add_shortcode('cf-readmore', 'cf_readmore'); |
Như vậy nội dung cần ẩn và hiện chúng ta chỉ cần thêm shortcode như bên dưới
|
1 |
Lorem Ipsum is [cf-readmore] Nội dung cần ẩn [/cf-readmore] |
Chúc các bạn thành công nhé!
