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

Trong khi đăng bài không phải lúc nào bạn xũng muốn hiển thị ra ngoài tất cả các nội dung của bài viết. Bài viết của bạn sẽ trở nên sinh động và lôi quấn bạn đọc hơn nếu nó được gắn thêm Button cho phép ẩn hiện một phần nội dung khi bạn Click chuột vào nó.
Các bạn có thể xem đemo ở đây: hoặc ấn vào Button ở bên dưới để xem thử

Bấm vào button bên dưới để xem demo:

Đây là phần nội dung bị ẩn. Khi bạn bấm vào chữ Xem phần demo thì phần này sẽ được hiển thị. Bấm tiếp vào chữ Ẩn thì phần này sẽ được ẩn đi.

Code của thủ thuât:

<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.

- Thay các chữ Xem và Ẩn màu đỏ ở trên theo ý muốn của bạn.

- 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.

Post by: Namkna

Hãy like nếu bài viết có ích →

0