<div id='bai-more'> <div id='p-more'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </div> <div id='read-more'><span>XEM THÊM</span></div><div id='read-less'><span>THU GỌN</span></div> </div>
Nội dung HTML
#p-more {
height: 50px;
overflow: hidden;
}
#read-less {
display: none;
}
#read-more, #read-less {
background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,255,255,1));
color: blue;
cursor: pointer;
position: absolute;
bottom: -20px;
padding: 15px 0;
text-align: center;
width: 100%;
}
#read-more span, #read-less span{
background:#0c0;
padding:3px 15px;
border-radius:30px;
color:#fff;
}
#bai-more {
position: relative;
}
CSS các thẻ
$(document).ready(function(){
var toggleReadMore = function() {
$('#read-more').click(function(e) {
$(this).prev().animate({'height': $(this).prev()[0].scrollHeight + 'px'}, 400);
$(this).hide();
$(this).next('#read-less').show();
});
$('#read-less').click(function(e) {
$(this).prev().prev().animate({height: '90px'}, 400);
$(this).hide();
$(this).prev('#read-more').show();
});
};
toggleReadMore();
}());
jQuery hoạt động