Với một số nội dung trên website, đôi khi hiển thị ra hết khiến cho giao diện web của bạn trông không được gọn gàng và bắt mắt, chính vì vậy việc làm cách nào để chèn nút xem thêm và thu gọn nội dung là điều rất cần thiết
Trong bài viết này mình sẽ hướng dẫn bạn thực hiện việc thu gọn và xrm thêm nội dung trên website một cách đơn giản, dễ làm
Xem demo như hình bên dưới
Trên website sử dụng theme Flatsome, chúng ta sẽ thực hiện như sau:
1. Chèn script vào Body
Bước 1: vào menu Flatsome
Bước 2: chọn Advanced để vào Flatsome Advanced Options
Bước 3: tại menu Global Settings kéo xuống ở phần Body Scripts – Bottom chèn đoạn code sau đây vào
<script> function toggleContent() { var hiddenContent = document.getElementById("hiddenContent"); var showMoreLink = document.getElementById("showMoreLink"); if (hiddenContent.style.height === "auto") { hiddenContent.style.height = "4.5em"; showMoreLink.innerHTML = "Xem thêm"; } else { hiddenContent.style.height = "auto"; showMoreLink.innerHTML = "Rút gọn"; } }</script> |
Sau đó bấm Save All Changes
2. Chèn CSS vào theme
Tiếp theo chúng ta sẽ CSS cho button đẹp hơn
Bạn chèn đoạn CSS này với 2 cách chèn trên theme Flatsome
Cách 1: cũng vào menu Flatsome, chọn Advanced để vào Flatsome Advanced Options sau đó chon menu Custom CSS bạn chèn đoạn CSS sau vào sau đó bấm Save All Changes
.hidden-content { overflow: hidden; line-height: 1.5em; height: 4.5em; }.show-more { display: block; cursor: pointer; color: #fbae37; text-decoration: underline; border-color: #fbae37; border: 1px solid #fbae37; border-radius: 5px; margin: 0 auto; max-width: 150px; padding: 5px 5px; text-align: center;}.hidden-content { margin-bottom: 10px;} |
Cách 2: bạn vào menu Flatsome sau đó chọn Theme Options, tiếp đến kéo xuống phần CSS bổ sung dán đoạn CSS trên vào và bấm Đăng
Lưu ý: CSS là để làm cho giao diện nút button Xem thêm và Rút gọn trở nên đẹp, vì vậy nếu bạn rành về css có thể tự điều chỉnh màu sắc hay border sao cho đẹp theo ý bạn.
3. Chèn code ở đoạn nội dung cần rút gọn
Tại đoạn nội dung cần rút gọn bạn chèn trên và dưới như sau
<div id="hiddenContent" class="hidden-content"><p>Đây là đoạn nội dung mà bạn cần xem thêm và rút gọn</p></div> <span id="showMoreLink" class="show-more" onclick="toggleContent()">Xem thêm</span> |
Như vậy là xong, lưu ý là đoạn code trên đây mình đang dùng cho theme Flatsome, nên nếu bạn dùng theme khác thì hãy xem xét trước khi thực hiện, ngoài ra với những bạn không rành về code thì nên cân nhắc (mặc dù code này không chèn vào function.php nên không gây ra các vấn đề gì lớn nhưng vẫn có thể sẽ xảy ra lỗi không mong muốn nếu bạn thực hiện sau)
Chúc bạn thành công
Ví dụ minh họa luôn một bức thư tình sau đây cho anh em xem nhé
