Để rút ngắn ngội dung mô tả sản phẩm bạn chỉ cần copy 2 đoạn code jQuery và CSS đưới đây vào thêm mình đang sử dụng!
$(window).on('load', function(){ if($('.tab-panels div#tab-description').length > 0){ var wrap = $('.tab-panels div#tab-description'); var current_height = wrap.height(); var your_height = 300; if(current_height > your_height){ wrap.css('height', your_height+'px'); wrap.append(function(){ return '<div class="dnw_readmore_flatsome dnw_readmore_flatsome_more"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>'; }); wrap.append(function(){ return '<div class="dnw_readmore_flatsome dnw_readmore_flatsome_less" style="display: none;"><a title="Xem thêm" href="javascript:void(0);">Thu gọn</a></div>'; }); $('body').on('click','.dnw_readmore_flatsome_more', function(){ wrap.removeAttr('style'); $('body .dnw_readmore_flatsome_more').hide(); $('body .dnw_readmore_flatsome_less').show(); }); $('body').on('click','.dnw_readmore_flatsome_less', function(){ wrap.css('height', your_height+'px'); $('body .dnw_readmore_flatsome_less').hide(); $('body .dnw_readmore_flatsome_more').show(); }); } } });
.dnw_readmore_flatsome { text-align: center; cursor: pointer; position: absolute; z-index: 10; bottom: 0; width: 100%; background: #fff; } .dnw_readmore_flatsome:before { height: 55px; margin-top: -45px; content: ""; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff00', endColorstr='#ffffff',GradientType=0 ); display: block; } .dnw_readmore_flatsome a { color: var(--primary-color); display: block; } .dnw_readmore_flatsome a:after { content: ''; width: 0; right: 0; border-top: 6px solid var(--primary-color); border-left: 6px solid transparent; border-right: 6px solid transparent; display: inline-block; vertical-align: middle; margin: -2px 0 0 5px; } .dnw_readmore_flatsome_less a:after { border-top: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--primary-color); } .dnw_readmore_flatsome_less:before { display: none; }