Sau khi hoàn thành bài tập kiểm tra định dạng bằng jquery thì chúng ta tiếp tục với bài tập tạo accordion bằng jquery. Đây là chức năng thường được sử dụng để hiển thị thông tin trong một không gian nhỏ cần phải ẩn đi một số thông tin chưa cần hiện ra hết cùng lúc.
Yêu cầu:
Xây dựng một accordion đơn giản bằng jquery, khi nhấn vào một thành phần con thì sẽ xuất hiện nội dung bên trong nhưng ẩn di những thành phần còn lại.
Phân tích:
Cần xác định khi nhấn vào một thành phần thì xử lý việc hiện nội dung, thêm class để phân biệt với các thành phần không được chọn, rồi khi click sang thành phần khác thì xử lý tương tự cho thành phần đó đồng thời ẩn đi class của các thành phần không được chọn.
Code:
$(function () {
// Accordion Panels
$(".accordion div").show();
setTimeout("$('.accordion div').slideToggle('slow');", 1000);
$(".accordion h3").click(function () {
$(this).next(".pane").slideToggle("slow").siblings(".pane:visible").slideUp("slow");
$(this).toggleClass("current");
$(this).siblings("h3").removeClass("current");
});
});
Giải thích:
Cho thẻ div trong class accordion hiệu ứng trượt lên xuống slideToggle trong 1 giây
Khi click vào thẻ h3 của tiêu mỗi tiêu đề thì tìm class pane để hiển thị ra đồng thời tìm class pane nào khác đang hiển thị để tắt đó đi bằng hiệu ứng slideUp.
Tương tự vieejv hiển thị class pane thì cũng tác động tương tự đối với class css current xác định thành phần nào đang được chọn.
Kết luận:
Như vậy là chúng ta vừa hoàn thành xong bài tập tạo accordion bằng jquery rất đơn giản phải không nào? Bài tập này không những rèn luyện cho bạn nắm vững kiến thức jquery hơn mà còn giúp sau này các bạn có thể mở rộng ra hoặc css lại cho phù hợp với nhu cầu sử dụng.