Mã HTML và CSS

Chúng ta bắt đầu accordion với mã HTML như sau:

<div id="accordiondemo">
  <h3>Tiêu đề accordion</h3>
  <div class="accordion">nội dung bên trong accordion</div>
  <h3>Tiêu đề accordion</h3>
  <div class="accordion">nội dung bên trong accordion</div>
  <h3>Tiêu đề accordion</h3>
  <div class="accordion">nội dung bên trong accordion</div>
</div>

Mã CSS chỉ có tác dụng khi di chuột vào thẻ h3 sẽ hiển thị dạng bàn tay và trang trí:

#accordiondemo h3 {
	cursor: pointer;
  border: 1px solid #ccc;
  background: #EFEFEF;
  padding: 4px 8px;
}

Mã javascript

// Ẩn tất cả .accordion trừ accordion đầu tiên
$("#accordiondemo .accordion:not(:first)").hide();
// Áp dụng sự kiện click vào thẻ h3
$("#accordiondemo h3").click(function(){
	// chọn .accordion (do phần tử đi đi ngay sau phần tử h3 nên ta dùng .next())
  $accordion = $(this).next();
  // Kiểm tra nếu đang ẩn thì sẽ hiện và ẩn các phần tử khác
  // Nếu đang hiện thì click vào h3 sẽ ẩn
  if ($accordion.is(':hidden') === true) {
    $("#accordiondemo .accordion").slideUp();
    $accordion.slideDown();
  } else {
    $accordion.slideUp();
  }
});

Bạn có thể xem thêm lựa chọn .not() của jQuery (khác với :not)