Hướng dẫn tạo nút hiệu ứng thu gọn - Mở rộng với jquery readmore

Jquery Readmore. Js là plugin javascript giúp tạo hiệu ứng, nút bấm thu gọn, mở rộng khi cần trình bày đoạn văn bản quá dài.

Download: Readmore. Js - Link trang chủ

Demo: Hài Tết

Các bạn bấm vào 1 video bất kỳ và xem ở phần chú thích.

Hiển thị thêm



Hiển thị bớt



Hướng dẫn:

Tải về file readmore. Js ở trên và up lên host.

Chèn đoạn code sau vào nơi hiển thị nội dung bạn cần thu gọn.

Mã:

<script type="text/javascript" src="clients/js/jquery.readmore.js"></script>
<script type="text/javascript">
$('article').readmore({
  speed: 75,
  moreLink: '<a href="#">HIỂN THỊ THÊM</a>',
  lessLink: '<a href="#">HIỂN THỊ BỚT</a>',
  collapsedHeight: 40,
  heightMargin:1,
});
</script>

Với article là biến chứa nội dung cần thu gọn, bạn có thể tùy biến tùy theo code của bạn.

Lưu ý biến này trong code của bạn phải là duy nhất không được trùng, có thể lấy theo id đỡ trùng.

Ở đây đoạn code chứa nội dung trong ví dụ là:

Mã:

<article>Nội dung cần thu gọn / mở rộng</article>

Lưu ý:

Plugin này hoạt động dựa trên jQuery nên các bạn cần thêm thư viện jQuery vào code nếu chưa có.

VPS tốt nhất dành cho webmaster: Vultr hoặc DigitalOcean