Làm sao để ẩn một phần nội dung bài viết một cách dễ dàng trong Blogger (Blogspot)

Viếng thăm một số diễn đàn , mình thấy có 1 code rất hay , dùng để ẩn/hiện (Hide/Show) một đoạn văn bản chỉ với một nút click chuột. Đoạn code này có tên là Spoiler Tag, được sử dụng dưới dạng ngôn ngữ BBCode (dùng trong forum) , có chức năng giúp trang tải nhanh hơn vì không hiển thị hết toàn bộ nội dung. Nay mình xin giới thiệu cho các bạn, nếu thích hãy sử dụng nó nhé.
Dưới đây là một mẫu ví dụ :

Spoiler :

Đây là mẫu
Widget bởi boyproDX's Blog

Bạn thấy thế nào ? Rất tuyệt đúng không. Và giờ , để sử dụng nó , bạn cần thêm đoạn code sau đây trong bài viết và làm theo hướng dẫn

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 0px;">
Spoiler: <input value="Xem" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')  {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Ẩn';  } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';  this.innerText = ''; this.value = 'Xem';  }" type="button">
</div><div><div style="display: none;">Đoạn text của bạn tại đây</div></div></div>

Thay đổi Đoạn text của bạn tại đây thành Phần nội dung bạn muốn ẩn , bạn cũng có thể xóa chữ Spoiler mà không gây lỗi cho code. Chúc bạn thành công

P/s : Theo yêu cầu của bạn đọc, mình sẽ cung cấp thêm đoạn code phụ để xử lý tình trạng gây khó khăn cho người đọc : Khi bài đăng quá dài, nếu muốn ẩn , thì phải kéo lên trên để thực hiện thao tác nhấn nút Ẩn , gây phiền phức.

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 0px;">
Spoiler: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')  {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Ẩn';  } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';  this.innerText = ''; this.value = 'Xem';  }" style="font-size: 10px; margin: 0px; padding: 0px; width: 45px;" type="button" value="Xem" /></div>
<div>
<div style="display: none;">
Đoạn text của bạn tại đây</div>
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')  {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Ẩn';  } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';  this.innerText = ''; this.value = 'Xem';  }" style="font-size: 10px; margin: 0px; padding: 0px; width: 45px;" type="button" value="Ẩn" /></div>
</div>