Cara membuat kotak spoiler/kotak tersembunyi ini hanya membutuhkan kode saja...
walaupun terlihat banyak script cara membuat kotak spoiler/kotaktersembunyi ini.. Tapi cukup menarik loh untuk di coba..
dan script ini dapat mengatur jarak atau panjang, lebar kotak yang nanti anda akan simpan..
Jadi kita tidak perlu mengatur ukuran "
Width/leba r" dan "
Tinggi/height " secara otomatis menyesuaikan lokasi. Mantep bukan?
Kodenya seperti ini :
<div class='widget-content'>
<center><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 100%;" value="
OPEN 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 = '
CLOSE '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = '
OPEN 2 '; }" type="button" />
</div>
<div style="border:; margin: 0px; padding: 6px;" class="alt2"><div style="display: none;">
<div style="border: 0px solid rgb(153, 153, 153); overflow: auto; width: 300px; height: 365px; text-align: left;">
<div style="text-align: center;">
MASUKKAN TULISAN/KODE/GAMBAR DI SINI </div>
</div></div></div>
Keterangan :
Warna Hijau adalah tulisan yang muncul sebelum spoiler dibuka. Dengan kata lain Open 1 . Sobat bisa menggantinya
Warna Merah adalah tulisan yang muncul ketika spoiler dibuka. Yaitu Close
Warna UnguMerah adalah tulisan setelah spoiler dibuka,lalu ditutup lagi. Dengan kata lain Open 2
Dan Warna Biru, masukan kata, gambar, dan lain-lain yang ingin anda masukan didalamnya..
Semoga Bermanfaat untuk anda...
silakan berkomentar..
