Thu gọn bài viết, mô tả chi tiết sản phẩm trên web/blog bằng javascrpit
Bạn có nội dung chi tiết quá dài, bạn có một bài viết với số dòng nhiều, bạn muốn hạn chế lại để khi người dung muốn xem thêm thì click xem thêm còn không thì để gọn lại. Làm cho web nhìn gọn gàng, trực quan cho khách truy cập.
 |
| Thu gọn vài viết, mô tả sản phẩm |
Bài này sẽ giúp các bạn thu gọn bài viết, mô tả sản phẩm trên web/blog bằng javascrpit
Code thu gọn
<style>
.single_post .post_body {
overflow: hidden;
position: relative;
padding-bottom: 25px;
}
.single_readmore {
text-align: center;
cursor: pointer;
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
background: #fff;
}
.single_readmore:before {
height: 55px;
margin-top: -45px;
content: "";
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff00', endColorstr='#ffffff',GradientType=0 );
display: block;
}
.single_readmore a {
color: #222b45;
display: block;
}
.single_readmore_less a:after {
border-top: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #318A00;
}
.single_readmore_less:before {
display: none;
}
</style>
<script>
(function($){
$(document).ready(function(){
$(window).on('load', function(){
if($('.single_post .post_body').length > 0){
var wrap = $('.single_post .post_body');
var current_height = wrap.height();
var your_height = 1000;
if(current_height > your_height){
wrap.css('height', your_height+'px');
wrap.append(function(){
return '<div class="single_readmore single_readmore_more"><a title="Xem thêm" href="javascript:void(0);">Xem tất cả</a></div>';
});
wrap.append(function(){
return '<div class="single_readmore single_readmore_less" style="display: none;"><a title="Xem thêm" href="javascript:void(0);">Thu gọn</a></div>';
});
$('body').on('click','.single_readmore_more', function(){
wrap.removeAttr('style');
$('body .single_readmore_more').hide();
$('body .single_readmore_less').show();
});
$('body').on('click','.single_readmore_less', function(){
wrap.css('height', your_height+'px');
$('body .single_readmore_less').hide();
$('body .single_readmore_more').show();
});
}
}
});
});
})(jQuery);
</script>
Lưu ý:
- Blog có sử dụng JQuery, đặt code trước </head>
- .single_post .post_body là thẻ bọc nội dung bài viết của bạn
- your_height: chiều rộng bạn muốn hiển thị
