Home
thủ-thuật-blog

Tạo Button ẩn/hiện nội dung cho blog

#button an hien noi dung cho blog, #button an hien noi dung, #an hien noi dung

#Type 1.High-class

Spoiler: show
{Phần nội dung bị ẩn} 
<div style="padding: 3px; background-color: #FFFFFF; border: 1px solid #d8d8d8; font-size: 1em;">
<div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;">
<span 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.innerHTML = '<b>Spoiler: </b><a href=\'#\' onClick=\'return false;\'>hide</a>'; } 
else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; 
this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onClick=\'return false;\'>show</a>'; }" />
<b>Spoiler: </b><a href="#" onClick="return false;">show</a></span></div>
<div class="quotecontent">
<div style="display: none;">
{Phần nội dung bị ẩn}
</div></div></div>

#Type 2.Stylized

{Phần nội dung bị ẩn} 
<div><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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; 
this.innerText = ''; this.value = 'Xem Nội dung'; }" style="border: rgb(255, 58, 86); font-size: 14px; margin-bottom: 0px; padding: 0px;" type="button" value="Click Open" />
</div>
<div>
<div style="background: rgb(255, 255, 255); border: 1px solid rgb(255, 58, 86); display: none; padding: 1px;">
{Phần nội dung bị ẩn}
</div></div>

#Type 3.Simple

{Phần nội dung bị ẩn} 
<div>
<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: 75px;" type="button" value="Xem" />
</div>
<div>
<div style="display: none;">
{Phần nội dung bị ẩn}
</div>
</div>
</div>