Bootstrap Collapse

Trong hướng dẫn này, bạn sẽ học cách hiển thị và ẩn các phần tử bằng Bootstrap.

Chuyển đổi hiển thị nội dung với Bootstrap

Bạn có thể sử dụng plugin JavaScript Bootstrap collapse để dễ dàng hiển thị và ẩn (hoặc mở rộng và thu gọn) các phần tử cụ thể trên một trang web.

Các nút và liên kết (tức là các phần tử <button> và <a>) thường được sử dụng làm trình kích hoạt được ánh xạ tới các phần tử bạn muốn chuyển đổi.

Mở rộng và thu gọn các phần tử thông qua các thuộc tính dữ liệu

Bạn có thể hiển thị và ẩn các phần tử trong Bootstrap bằng cách nhấp vào button hoặc liên kết thông qua các thuộc tính data mà không cần viết bất kỳ mã JavaScript nào. Hãy thử một ví dụ và xem nó thực sự hoạt động như thế nào:

<!-- Trigger Buttons HTML -->
<a href="#myCollapse" data-bs-toggle="collapse">Toggle Element</a>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#myCollapse">Toggle Element</button>

<!-- Collapsible Element HTML -->
<div class="collapse show" id="myCollapse">
    <div class="card card-body">This is a simple example of showing and hiding specific element via data attributes. Click any trigger buttons to toggle this panel.</div>
</div>

Chúng tôi vừa tạo một điều khiển có thể thu gọn mà không cần viết bất kỳ mã JavaScript nào. Chà, chúng ta hãy lần lượt xem qua từng phần của đoạn mã này để hiểu rõ hơn.

Giải thích mã

Về cơ bản, plugin Bootstrap collapse yêu cầu hai phần tử hoạt động bình thường - phần tử kích hoạt như button hoặc siêu liên kết và bản thân phần tử có thể thu gọn.

• Thuộc tính data-bs-toggle="collapse" được thêm vào phần tử kích hoạt hoặc bộ điều khiển cùng với một thuộc tính data-bs-target (đối với các button) hoặc href (đối với siêu liên kết) để tự động gán quyền kiểm soát một hoặc nhiều phần tử có thể thu gọn.
• Thuộc tính data-bs-target hoặc href chấp nhận một bộ chọn CSS (chẳng hạn như bộ chọn id #myCollapse trong ví dụ của chúng tôi) để áp dụng thu gọn cho một phần tử cụ thể.
• Lớp .collapse được thêm vào phần tử có thể thu gọn (dòng số 6).
• Bạn có thể tùy chọn thêm lớp .show (dòng số 6) vào phần tử có thể thu gọn ngoài lớp .collapse để làm cho nó mở theo mặc định.

Để làm cho các điều khiển có thể thu gọn hoạt động theo nhóm như menu accordion, bạn có thể sử dụng thành phần Bootstrap card. Xem hướng dẫn về Bootstrap accordion để tìm hiểu thêm về nó.

Mở rộng và thu gọn các phần tử qua JavaScript

Bạn cũng có thể mở rộng và thu gọn các phần tử theo cách thủ công thông qua JavaScript - chỉ cần gọi phương thức collapse() với  bộ chọn id hoặc class của phần tử có thể thu gọn.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("toggle");
    });
});
</script>

Các tùy chọn của Bootstrap collapse

Có một số tùy chọn nhất định có thể được truyền cho phương thức collapse() để tùy chỉnh chức năng của phần tử có thể thu gọn.

Bạn cũng có thể đặt các tùy chọn này bằng cách sử dụng các thuộc tính data trên accordion - chỉ cần thêm tên tùy chọn vào data-bs- như data-bs-parent="#myAccordion", data-bs-toggle="false".

Các phương thức của Bootstrap collapse

Đây là các phương thức tiêu chuẩn của bootstrap collapse:

Cách truyền các tùy chọn

Bạn có thể truyền các tùy chọn cho collapse sử dụng đối tượng options.

Trong ví dụ sau, việc hiển thị phần tử có thể thu gọn sẽ không thể, bởi vì tùy chọn toggle cho phần tử có thể thu gọn được đặt thành false.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("toggle", {
            toggle: false
        });
    });
});
</script>

toggle

Phương thức này bật / tắt (hiển thị hoặc ẩn) một phần tử có thể thu gọn.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("toggle");
    });
});
</script>

show

Phương thức này hiển thị một phần tử có thể thu gọn.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("show");
    });
});
</script>

hide

Phương thức này ẩn một phần tử có thể thu gọn.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("hide");
    });
});
</script>

dispose

Phương thức này hủy phần tử thu gọn (tức là loại bỏ dữ liệu được lưu trữ trên phần tử DOM).

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        var myCollapse = bootstrap.Collapse.getInstance($("#myCollapse")[0]);
        console.log(myCollapse);
        // {_element: div#myCollapse.collapse.show, _isTransitioning: false, _config: {…}, _triggerArray: Array(2), _selector: "#myCollapse", …}

        $("#myCollapse").collapse("dispose");
        console.log(myCollapse);
        // {_element: null, _isTransitioning: null, _config: null, _triggerArray: null, _selector: null, …}
    });
});
</script>

getInstance

Đây là một phương thức tĩnh cho phép bạn lấy instance của collapse được liên kết với một phần tử DOM.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCollapse = bootstrap.Collapse.getInstance($("#myCollapse")[0]);
        console.log(myCollapse);
        // {_element: div#myCollapse.collapse.show, _isTransitioning: false, _config: {…}, _triggerArray: Array(2), _selector: "#myCollapse", …}
    });
});
</script>

getOrCreateInstance

Đây là một phương thức tĩnh cho phép bạn lấy instance của collapse được liên kết với phần tử DOM hoặc tạo một bản mới trong trường hợp bản thu gọn không được khởi chạy.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCollapse = bootstrap.Collapse.getOrCreateInstance($("#myCollapse")[0]);
        console.log(myCollapse);
    });
});
</script>

Mẹo: Các phương thức tĩnh không thể được gọi trên các instance của lớp (tức là các đối tượng). Chúng được gọi từ cấp lớp. Từ khóa static được sử dụng để định nghĩa một phương thức tĩnh cho một lớp.

Các sự kiện của Bootstrap Collapse

Lớp collapse của Bootstrap bao gồm một số sự kiện để kết nối vào chức năng thu gọn.

Ví dụ sau đây hiển thị thông báo cảnh báo cho người dùng khi quá trình chuyển đổi của phần tử có thể thu gọn đã hoàn tất.

<script>
$(document).ready(function(){
    $("#myCollapse").on("hidden.bs.collapse", function(){
        alert("Collapsible element has been completely closed.");
    });
});
</script>

Bootstrap • Bootstrap Nâng Cao