Tạo button cho phép bạn ẩn/hiện nội dung

Chỉ với 1 dòng lệnh kết hợp với các thẻ div là bạn có thể tạo 1 button cho phép ẩn hiện nội dung của bạn khi click vào nó. Đây là một thủ thuật thường thấy trong các Forum, và hôm nay mình sẽ hướng dẫn các bạn thực hiện thủ thuật này.

Demo:

Chẳng hiểu gì về phụ nữ

Hai cô bạn gái trò chuyện: "Này cậu, tay trưởng phòng mới đúng là không hiểu gì về phụ nữ. Hôm qua, lúc ăn trưa, anh ta uống mấy ly rượu, lúc về văn phòng cứ đòi hôn mình...".
Cô bạn sốt ruột:
- Rồi thế nào nữa?
- Mình bảo: "Dừng lại ngay, nếu không em sẽ kêu lên đấy!". Thế mà hắn...
- Vẫn sàm sỡ cậu à?
- Không! Hắn ta dừng lại thật!

Code:

Phần nội dung hiển thị
<div>
<div>
<input type="button" value="Xem" style="width:75px;font-size:10px;margin:0px;padding:0px;" 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'; }">
</div>
<div>
<div style="display: none;">
{Phần nội dung bị ẩn}
</div>
</div>
</div>

- Khi các bạn muốn áp dụng cho bài viết của mình thì cứ việc thay thế dòng {phần nội dung bị ẩn} thành nội dung bài viết của bạn là xong.

- Nếu bạn muốn tạo nhiều nút Ẩn/Hiện trong bài viết của mình thì cứ làm tương tự.

Chúc các bạn thành công.

Phan Dũng