Code tạo Accordion thu gọn nội dung với Html, Css, Jquery

434 Lượt xem

Code tạo Accordion thu gọn nội dung với Html, Css, Jquery. Mời các bạn cùng theo dõi bài viết hướng dẫn của Tòn dười đây nhé!

Xem thêm: Thư viện coder mới nhất

Accordion rất hữu ích khi bạn muốn chuyển đổi giữa ẩn và hiển thị số lượng nội dung dài. Với khả năng ẩn hiện nội dung để tránh sự dài dòng làm ảnh hưởng đến quá trình lướt web của khách hàng.

Code tạo Accordion thu gọn nội dung với Html, Css, Jquery

1. Hướng dẫn tạo nội dung thu gọn

Bước 1: Thêm HTML

<button class="accordion">Thông tin 1</button>
<div class="panel">
  <p>Hoa cẩm chướng là một trong những loài hoa đẹp được nhiều người yêu thích và đã xuất hiện từ lâu đời. Tuy nhiên, với ý nghĩa tượng trưng của mình, hoa cẩm chướng phần lớn được dành tặng cho bà , cho mẹ hoặc cho bạn bè. Rất ít người dùng hoa cẩm chướng để dành tặng người yêu.</p>
</div>

<button class="accordion">Thông tin 2</button>
<div class="panel">
  <p>Hoa cẩm chướng là một trong những loài hoa đẹp được nhiều người yêu thích và đã xuất hiện từ lâu đời. Tuy nhiên, với ý nghĩa tượng trưng của mình, hoa cẩm chướng phần lớn được dành tặng cho bà , cho mẹ hoặc cho bạn bè. Rất ít người dùng hoa cẩm chướng để dành tặng người yêu.</p>
</div>

<button class="accordion">Thông tin 3</button>
<div class="panel">
  <p>Hoa cẩm chướng là một trong những loài hoa đẹp được nhiều người yêu thích và đã xuất hiện từ lâu đời. Tuy nhiên, với ý nghĩa tượng trưng của mình, hoa cẩm chướng phần lớn được dành tặng cho bà , cho mẹ hoặc cho bạn bè. Rất ít người dùng hoa cẩm chướng để dành tặng người yêu.</p>
</div>

Bước 2: Thêm CSS

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

Bước 3: Thêm JavaScript

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

2.Lời kết

Kết hợp 3 bước như trên, bạn có ngay 1 kết quả thu gọn nội dung bài viết. Hy vọng, đoạn code tạo Accordion nội dung thu gọn với HTML & CSS sẽ làm cho website của bạn trở nên gọn gàng và khoa học hơn. Chúc các bạn thành công!

Kết quả

Hoa cẩm chướng là một trong những loài hoa đẹp được nhiều người yêu thích và đã xuất hiện từ lâu đời. Tuy nhiên, với ý nghĩa tượng trưng của mình, hoa cẩm chướng phần lớn được dành tặng cho bà , cho mẹ hoặc cho bạn bè. Rất ít người dùng hoa cẩm chướng để dành tặng người yêu.

Hoa cẩm chướng là một trong những loài hoa đẹp được nhiều người yêu thích và đã xuất hiện từ lâu đời. Tuy nhiên, với ý nghĩa tượng trưng của mình, hoa cẩm chướng phần lớn được dành tặng cho bà , cho mẹ hoặc cho bạn bè. Rất ít người dùng hoa cẩm chướng để dành tặng người yêu.

Hoa cẩm chướng là một trong những loài hoa đẹp được nhiều người yêu thích và đã xuất hiện từ lâu đời. Tuy nhiên, với ý nghĩa tượng trưng của mình, hoa cẩm chướng phần lớn được dành tặng cho bà , cho mẹ hoặc cho bạn bè. Rất ít người dùng hoa cẩm chướng để dành tặng người yêu.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0935961044