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:

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));
}

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.