Chào các bạn, trong khuôn khổ bài viết này, VNCODE  xin chia sẻ 1 chức năng nhỏ giúp các bạn có thể tự thêm button xem thêm trong mô tả bài vết mà bạn muốn rút gọn. Đây là một trong các bài viết thuộc chủ đề chia sẻ Thủ Thuật Nukeviet, mong các bạn đón xem thường xuyên

Hướng dẫn thêm nút bottom trong tin tức nukeviet

Tìm đến phần hiển thị nội dung cần rút gọn. và thêm các class như sau:

Xem Thêm : Hướng dẫn tạo app id Facebook trong block facebook message nukeviet

VD: {DETAIL.bodytext} => đoạn hiển thị nội dung cần rút gọn

<div class="product-well">
							<div class="bodytext__content">
								{DETAIL.bodytext}
								<div class="opacity_readmore"></div>
							</div>
							<div class="show-more">
								<a class="btn btn-default btn--view-more btn--view-more-1">
									<span class="more-text">
									<span>Xem đầy đủ</span>
									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
									  <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
									</svg></span>
																		<span class="less-text">
																		<span>Thu gọn</span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
									  <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
									</svg></span>
								</a>
							</div>
						</div>

Dưới đây là css ẩn đi phần dư thừa của nội dung cần rút gọn

Ở đây chúng ta cần chú ý đến: class .des có chiều cao height:125px => nội dung có chiều cao từ 125px trở đi sẽ được rút gọn

.des{
	height: 125px;
	overflow: hidden;
	transition: height 0.2s;
	position: relative;
}

.product{
	display: flex;
	justify-content: space-between;
}

.product-well .show-more {
	position: relative;
}
.product-well .product-well .show-more:before {
	display: block;
	content: "";
	height: 120px;
	position: absolute;
	top: -120px;
	width: 100%;
	left: 0;
	background: rgba(255, 255, 255, 0.6);
	background: linear-gradient(
180deg
, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.33) 33%, rgba(255, 255, 255, 0.8) 83%, #fff);
}
.product-well .show-more .btn--view-more {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background-color: transparent;
    color: #008744;
    font-weight: 400;
    border-radius: 3px;
    line-height: 18px;
    font-size: 14px;
    border: 1px solid #008744;
    padding: 10px 70px;
}

.product_detail .panel-body{
	padding-bottom: 50px !important;
}
.product-well .show-more .btn--view-more span {
	color: #008744 !important;
	text-transform: none !important;
	font-size: 14px !important;
	font-weight: 400 !important;
}

.product-well.expanded .des {
	height: auto;
	-webkit-transition: height 0.2s;
	-moz-transition: height 0.2s;
	transition: height 0.2s
}

.more-text {
	display: flex;
}

.more-text svg, .less-text svg{
	margin-left: 5px;
}

.product-well.expanded .less-text {
	display: flex
}

.product-well.expanded .more-text {
	display: none
}

.product-well.expanded .show-more::before {
	display: none
}
.product-well .less-text {
	display: none;
}
.opacity_readmore {
    position: absolute;
    bottom: 1px;
    left: 0px;
    width: 100%;
    height: 120px;
    z-index: 2;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
}

Xem Thêm : Hướng dẫn bỏ index.php trong url trên website nukeviet

Tiếp theo thêm một chút javacript để thực hiện hành động xem thêm và thu gọn

Ở script này bạn sẽ để ý thấy $(‘.bodytext__content’).outerHeight() >= 125 => dòng này thể hiện nếu chiều cao của nội dung hiển thị lớn hơn 125px thì sẽ hiển thị 2 nút button xem thêm và ẩn đi

	$(document).ready(function(e){
	    if($('.bodytext__content').outerHeight() >= 125){
		   $('.bodytext__content').addClass('des');
	    }else{
		   $(".show-more").remove();
		   $(".opacity_readmore").remove();
	    }
		$('.btn--view-more-1').on('click', function(e){
			e.preventDefault();
			var $this = $(this);
			$this.parents('#tab-1').find('.product-well').toggleClass('expanded');
			$(this).toggleClass('active');
			$('.opacity_readmore').toggleClass('hidden');
			return false;
		});
	});

Lưu lại và xóa cache reload lại trang để thử lại. Mong bài viết giúp ích được các bạn phần nào trong thiết kế Website. Hãy nhấn nút like và share  để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm VNCODE.