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

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

Fairstar | 05-08-2011 | nhận xét (3)

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ó. Thủ thuật này đã được mình áp dụng trong các trang phim của mình các bạn có thể xem đemo ở đây: hoặc ấn vào Button ở bên dưới để xem thử

Demo

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.