[Bài 5]: Tạo accordion bằng jquery

Bạn đang ở bài 5 trong 7 bài của serie Bài tập jquery.

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.

akordeon-modern-jquery-accordion-plugin

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");
    });
});

Demo

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.

[Bài 5]: Tạo accordion bằng jquery
4.4 (88.89%) 9 votes

Bình luận

1 Bình luận on "[Bài 5]: Tạo accordion bằng jquery"

Thông báo
avatar
Sắp xếp:   Mới nhất | Cũ nhất | Bình chọn nhiều
trackback

[…] vậy ở bài trước chúng ta đã hoàn thành bài tập tạo accordion bằng jquery rất đơn giản phải […]

wpDiscuz