Bài 4: Tạo hiệu ứng collapse và accordion bằng jquery

Trong bài học này, mình sẽ hướng dẫn cách tạo hiệu ứng collapse và accordion bằng jquery. Ý tưởng chính của hiệu ứng này là cách khối chỉ hiện tiêu đề. Khi click vào tiêu đề sẽ xuất hiện khối nội dung, click lần thứ hai sẽ ẩn nội dung. Ngoài ra, chỉnh sửa để hiệu ứng mượt mà và có trải nghiệm người dùng tốt hơn.

Video – Tạo hiệu ứng collapse và accordion bằng jquery

Ý tưởng

+ Chỉ hiện tiêu đề

+ Click vào tiêu đề sẽ hiện nội dung

+ Click lần nữa sẽ ẩn nội dung.

+ Ngoài ra, mình sẽ hướng dẫn cách tự động cuộn trang để đưa nội dung vừa đổ xuống về giữa màn hình.

+ So sánh với collapse trong Bootstrap

+ Kiến thức mới: hàm slideUp, hàm slideDown, hàm slideToggle, hàm offset, hiệu ứng scrolTop,

Phần HTML

Căn chỉnh tùy theo bạn nhé. Đối với các khối chứa nội dung

<div class="main">
   <div class="jquery-accordion">
      <div class="khoi">
         <h3>Collapse 1</h3>
         <div class="noi-dung">Nội dung của bạn</div>
      </div>
      <div class="khoi">
         <h3>Collapse 2</h3>
         <div class="noi-dung">Nội dung của bạn</div>
      </div>
   </div>
</div>

div.jquery-accordion để bao bọc toàn bộ các phần nội dung của chúng ta.

Phần CSS

Nhớ reset css trước nhé.

*{
   margin:0;
   padding: 0;
}
.main{
   width: 100%;
   background-color: white;
   margin-top: 20px;
}
.jquery-accordion{
   width: 40%;
   margin: auto;
}
.khoi h3{
   background: #f5f5f5;
   padding: 10px 12px;
   color: #212121;
   border-radius: 1px;
   text-align: center;
   box-shadow: 1px 2px 2px rgb(0,0,0,0.23);
}
.noi-dung {
   padding: 10px 12px;
   border: 1px #212121 solid;
}

Phần JS – jquery

$(document).ready(function() {
   $('.noi-dung').slideUp(); /*ẩn nội dung*/

   $('.khoi h3').on('click', function(event) {
      // ngăn chặn mặc định
      event.preventDefault();
      // đóng/ mở
      $(this).next().slideToggle();

      // $(this).offset().top lấy vị trí của phần tử this

      $('html, body').animate({scrollTop:$(this).offset().top},400);
   });

// quay về đầu trang
   $('#btn-top').click(function(event) {
      /* Act on the event */
      $('html, body').animate({scrollTop:0},400);
   });
});

Kiến thức mới trong phần jquery:

+ hàm slideUp()/slideDown(): Hiện/ Ẩn nội dung.

+ Hàm slideToggle(): Hiện/ẩn nội dung, hàm gộp của slideUp và sldieDown

+ Hàm offset(): lấy vị trí của phần tử

+ Hiệu ứng cuộn trang

Phần Collapse và accordion Bootstrap mình chỉ nói nhanh ở cuối video. Chi tiết về nội dung này, các bạn có thể xem bài collapse trong khóa học Bootstrap.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ