Code button xem thêm trong mô tả bài viết nukeviet

Thứ ba - 19/07/2022 21:48
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:

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.

Tác giả: admin

Tổng số điểm của bài viết là: 5 trong 1 đánh giá

Xếp hạng: 5 - 1 phiếu bầu
Click để đánh giá bài viết

  Ý kiến bạn đọc

Những tin mới hơn

Những tin cũ hơn

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây