Thêm “Tính năng đọc tiếp” như Medium bằng vài dòng code

Tính năng “Đọc tiếp” là gì?

Đây là hiệu ứng mà chỉ hiển thị một phần nội dung, phần còn lại bị làm mờ hoặc ẩn đi. Khi người dùng nhấn “Đọc tiếp”, toàn bộ nội dung sẽ hiện ra.

“Cách giữ người đọc tập trung vào phần mở đầu, rồi kích thích họ tiếp tục kéo xuống.”

Cách triển khai tính năng “Đọc tiếp”

1. HTML cơ bản

<div class="read-more-wrapper">
  <div class="read-more-content">
    <p>Đoạn nội dung thứ nhất...</p>
    <p>Đoạn nội dung thứ hai...</p>
    <p>Đoạn nội dung bị ẩn/mờ...</p>
    <p>Và nhiều hơn nữa...</p>
  </div>
  <button class="read-more-toggle uk-button uk-button-text">Đọc tiếp ↓</button>
</div>

2. CSS để làm mờ nội dung

.read-more-wrapper {
  position: relative;
  max-height: 400px;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.read-more-wrapper.collapsed {
  max-height: none;
}

.read-more-wrapper::after {
  content: '';
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, white);
  pointer-events: none;
}

.read-more-wrapper.collapsed::after {
  display: none;
}

3. JavaScript xử lý toggle

document.addEventListener('DOMContentLoaded', function () {
  const wrapper = document.querySelector('.read-more-wrapper');
  const toggleBtn = wrapper.querySelector('.read-more-toggle');

  toggleBtn.addEventListener('click', function () {
    wrapper.classList.add('collapsed');
    toggleBtn.style.display = 'none';
  });
});

Tùy biến thêm

• Có thể điều chỉnh max-height tùy nội dung ngắn/dài.
• Có thể thêm hiệu ứng fade-in cho nội dung hiện ra.
• Thay đổi nút thành Hiển thị nội dung, hoặc thêm icon UIkit.

Lưu ý khi dùng

• Không nên áp dụng cho bài quá ngắn.
• Chỉ nên áp dụng phần mở đầu hoặc nội dung miễn phí.
• Nếu dùng cho SEO, đảm bảo không ẩn nội dung Google cần crawl.

Kết luận

“Đọc tiếp” là một tính năng nhỏ nhưng mang lại trải nghiệm người dùng tốt hơn, giúp bạn dẫn dắt người đọc hiệu quả. Với một đoạn mã đơn giản, bạn đã có thể áp dụng phong cách Medium vào blog, landing page hoặc bài viết dài bất kỳ.