Code Nút Xem Thêm Và Thu Gọn Nội Dung Bằng JS Quá Dễ

Bạn có thể sử dụng HTML, CSS và JavaScript để tạo nút mở rộng và thu gọn nội dung khi chiều cao của nội dung quá dài. Dưới đây là một ví dụ:

Nút xem thêm và thu gọn nội dung

Đây là phần nội dung HTML

<div class="content" id="content">
    <!-- Nội dung ví dụ -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>

<button class="toggle-btn" onclick="toggleContent()">Xem thêm</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

</div>

CSS vào file style.css

<style>
        /* Thiết lập khung nội dung */
        .content {
            height: 100px; /* Chiều cao mặc định */
            overflow: hidden;
            transition: height 0.3s ease;
        }

        /* Class mở rộng nội dung */
        .content.expanded {
            height: auto;
        }

        /* Style cho nút mở rộng/thu gọn */
        .toggle-btn {
            margin-top: 10px;
            cursor: pointer;
            color: blue;
            text-decoration: underline;
            border: none;
            background: none;
            font-size: 16px;
        }
    </style>

<style>

/* Thiết lập khung nội dung */

.content {

height: 100px; /* Chiều cao mặc định */

overflow: hidden;

transition: height 0.3s ease;

}

/* Class mở rộng nội dung */

.content.expanded {

height: auto;

}

/* Style cho nút mở rộng/thu gọn */

.toggle-btn {

margin-top: 10px;

cursor: pointer;

color: blue;

text-decoration: underline;

border: none;

background: none;

font-size: 16px;

}

</style>

Còn đây là JS bạn có thể viết vào file footer.php

<script>
    // Hàm mở rộng hoặc thu gọn nội dung
    function toggleContent() {
        const content = document.getElementById("content");
        const button = document.querySelector(".toggle-btn");
        
        // Kiểm tra trạng thái mở rộng/thu gọn
        if (content.classList.contains("expanded")) {
            content.classList.remove("expanded");
            button.textContent = "Xem thêm";
        } else {
            content.classList.add("expanded");
            button.textContent = "Thu gọn";
        }
    }
</script>

// Hàm mở rộng hoặc thu gọn nội dung

function toggleContent() {

const content = document.getElementById("content");

const button = document.querySelector(".toggle-btn");

// Kiểm tra trạng thái mở rộng/thu gọn

if (content.classList.contains("expanded")) {

content.classList.remove("expanded");

button.textContent = "Xem thêm";

} else {

content.classList.add("expanded");

button.textContent = "Thu gọn";

}

</script>

Xem thêm bài viết khác

Giải thích mã:

Code nút xem thêm và thu gọn nội dung bằng JS quá dễ

CSS:

.content có chiều cao ban đầu là 100px và overflow: hidden để ẩn nội dung nếu nó vượt quá chiều cao này.
Khi thêm class expanded, chiều cao của .content sẽ trở thành auto, cho phép hiển thị toàn bộ nội dung.

JavaScript:

Hàm toggleContent() kiểm tra nếu nội dung đang mở rộng (expanded) thì sẽ thu gọn lại và ngược lại.
Nút thay đổi nội dung thành “Xem thêm” hoặc “Thu gọn” tùy thuộc vào trạng thái hiện tại.

Hy vọng Tunlamweb trên giúp bạn thực hiện tính năng mong muốn!

Theo dỗi tên trên Fanpage và Youtube của mình nhé.