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

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 khắc phục lỗi không kết nối được cơ sở dữ liệu trong 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 : Hiển thị xem trước meta google

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.

Nguồn: https://vncode.info
Danh mục: Nukeviet

Related Posts

Hướng dẫn thêm active vào menu

VNCODE hôm nay xin chia sẽ đến mọi người cách để nhận diện thẻ active cho menu của NUKEVIET. NUKEVIET CMS là hệ quản trị nội dung…

Hiển thị xem trước meta google

Bản preview bài viết trên Google, trước đây được gọi là preview code, là một tính năng của SEO. Nó cho phép bạn xem trước trang hoặc…

Hướng dẫn khắc phục lỗi không kết nối được cơ sở dữ liệu trong NukeViet

Việc xuất hiện các lỗi không thể kết nối được cơ sở dữ liệu trong NukeViet v.4.5 thường xuyên xảy ra. Nhưng không phải bạn đọc nào…

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

Mình nghĩ đã có rất nhiều bạn tìm kiếm câu trả lời cho câu hỏi: Làm sao để bỏ index.php trong url trên website được xây dựng…

Hướng dẫn tạo app id Facebook trong block facebook message nukeviet

Block chat trên facebook là block trang website mà những doanh nghiệp có trang Faccebook có thể cài đặt trên website của họ. Với tính năng này,…

Hướng dẫn đăng nhập bằng facebook google nukeviet

Xem Thêm : Code button xem thêm trong mô tả bài viết nukevietHướng dẫn cấu hình login với Google Account (Gmail) cho trang đăng nhập / đăng…