code ẩn hiện một phần nội dung bài viết

Để sử dụng code, khi viết bài bạn chuyển sang chế độ HTML rồi dán vào vị trí mong muốn là được: Hay lắm đó!

<div style="text-align:center"><div><div>
<input 1="" 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:11px;margin:0;padding:4px;width:75px" type="button" value="Xem" />
</div><div>
<div style="background:#;display:none;padding:4px">
Nội dung
</div></div></div></div>

Bạn có thể thay các dòng màu đỏ theo ý thích. text-align: center để spoiler hiện ở giữa thay center bằng left hoặc right để nút hiển thị ở bên trái hoặc bên phải tùy trường hợp.

Nội dung là phần bạn muốn ẩn, đó có thể là văn bản, ảnh, clip... bất cứ thứ gì.

Vào codepen.io để trải nghiệm nhé.


<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">

<b>bạn muốn viết gì</b>: <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 = 'Hiện'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Hiện" /></div>

<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">

<div style="display: none;">



Chèn bất cứ thứ gì mà bạn muốn nó ẩn ở đây kể cả hình ảnh, video bla bla



</div>

</div>

</div>


<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"> <b>bạn muốn viết gì</b>: <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 = 'Hiện'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Hiện" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> Chèn bất cứ thứ gì mà bạn muốn nó ẩn ở đây kể cả hình ảnh, video bla bla </div> </div> </div>

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