Thu gọn nội dung

Trong bài thực hành này, chúng ta sẽ tìm hiểu cách thu gọn các khối nội dung bằng HTML, CSS và JavaScript.

Thu gọn khối nội dung

Click vào phần tử bên dưới để xem hiệu ứng thu gọn nội dung.

Collapsible

Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. Lorem ipsumdolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Xem kết quả

Cách tạo thu gọn khối nội dung

Bước 1) Thêm HTML:

Ví dụ

<div class="collapse">Collapsible</div>
<div class="textContent">
    <p>...</p>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho phần tử div */
.collapse {
    background-color:black;
    color:white;
    padding:20px;
    opacity:0.7;
    cursor:pointer;
    -webkit-transition:background-color 0.3s; /* Thêm hiệu ứng chuyển đổi màu nền */    
    -webkit-user-select:none;
}
/* Thêm icon dấu '+' vào cuối phần tử */
.collapse::after {
    content:"\002B";
    float:right;
    font-weight:bold;
}    
.collapse:hover {
    opacity:1;
}
/* Tạo kiểu cho khối nội dung */
.textContent {
    border:1px solid #ddd;
    border-top:none;
    padding:0 20px;
    background-color:#f1f1f1;
    overflow:hidden;
    max-height:0; /* Khối nội dung sẽ ẩn ban đầu */
    -webkit-transition:max-height 0.3s;    /* Thêm hiệu ứng chuyển đổi */
}
.active {
    background-color:lightblue;    
}
/* Thêm icon dấu '-' khi khối nội dung hiển thị */
.active::after {
    content:"\2212";
    float:right;
    font-weight:bold;
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>
/* Khai báo các biến và lấy giá trị */
var collapse, textContent;
collapse = document.getElementsByClassName('collapse')[0];
textContent = document.getElementsByClassName('textContent')[0];

/* Thêm sự kiện click vào phần tử div */
collapse.onclick = function() {
    this.classList.toggle("active"); /* Chuyển đổi thêm và xóa lớp active */
    if(textContent.style.maxHeight) {
        textContent.style.maxHeight = null;
    }else{
        textContent.style.maxHeight = textContent.scrollHeight + "px";    
    }    
}
</script>

Xem kết quả

Chúng ta cũng có thể thực hiện thu gọn nhiều khối nội dung bằng cách sử dụng JavaScript, xem ví dụ bên dưới như sau.

Collapsible 1

Collapsible 2

Collapsible 3

Đoạn mã JavaScript sẽ điều chỉnh lại như sau:

Ví dụ

<script>
/* Khai báo các biến và lấy giá trị */
var collapse, textContent, i;
collapse = document.getElementsByClassName('collapse');

for(i = 0; i < collapse.length; i++) {
    collapse[i].onclick = function() {
        textContent = this.nextElementSibling;
        this.classList.toggle("active");
        if(textContent.style.maxHeight){
            textContent.style.maxHeight = null;
        }else{
            textContent.style.maxHeight = textContent.scrollHeight + "px";    
        }    
    }
}

</script>