Tombol Hide dan show ini sangat berguna sekali untuk memangkas ruang halaman, terutama untuk penempatan gambar atau hal-hal yang spesifik lainnya..
Caranya pun cukup mudah...
Coba anda klik tombol yang ada dibawah ini..
Caranya anda tinggal copy kode script tersebut, dan ganti kode yang berwarna merah dengan postingan yang ingin di hideshow.
atau pakai kode berikut jika ingin menambahkan border seperti contoh ini..
<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;">
<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 = 'OPEN'; }" style="margin: 0px; padding: 0px; width: 100%;" type="button" value="OPEN" /> </div>
<div class="alt2" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: #ffffff; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Isikan disini yang ingin di hide show
</div>
</div>
</div>
Caranya pun cukup mudah...
Coba anda klik tombol yang ada dibawah ini..
<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">
Isikan saja di sini yang ingin anda hideshow
</div></div></div></div>
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">
Isikan saja di sini yang ingin anda hideshow
</div></div></div></div>
atau pakai kode berikut jika ingin menambahkan border seperti contoh ini..
<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;">
<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 = 'OPEN'; }" style="margin: 0px; padding: 0px; width: 100%;" type="button" value="OPEN" /> </div>
<div class="alt2" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: #ffffff; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Isikan disini yang ingin di hide show
</div>
</div>
</div>
selamat mencoba..!!!
Label:
Tutorial
0 komentar:
Posting Komentar