Hướng dẫn tạo nút “Xem thêm” và “Rút gọn” nội dung

Hôm nay Topweb.store hướng dẫn các bạn tạo nút “Xem thêm” và “Rút gọn” nội dung trên website

Bước 1: Chèn đoạn code script vào Body

<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>

Bước 2: Chèn đoạn code CSS sau vào theme

.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;
}

Bước 3: Tại đoạn nội dung website cần tạo nút “Xem thêm” và “Rút gọn” bạn chèn code trên và dưới như sau

<div id="hiddenContent" class="hidden-content">
<p>
Đây là nội dung website cần tạo nút "Xem thêm" và "Rút gon"
</p>
</div>
<span id="showMoreLink" class="show-more" onclick="toggleContent()">Xem thêm</span>

Chúc các bạn thành công!