Macam-Macam Tombol Spoiler

Macam-Macam Tombol Spoiler, Assalamualaikum semuanya,, pada kesempatan kali ini saya akan sedikit berbagi tentang macam-macam tombol spoier show/hide dan bagaimana cara membuatnya. Spoiler sendiri sangat bermanfaat buat sobat yang sering posting artikel panjang-panjang. sobat bisa menaruhnya di spoiler dan loading blog sobat bisa ringan ,, asikkan. tombol spoiler sendiri ada bermacam-macam model dan bentuk, berikut macam-macam tombol spoiler beserta codenya :: 
1.Spoiler Model 1
Spoiler:

Taruh kode atau text yang akan di sembunyikan di sini.Taruh kode atau text yang akan di sembunyikan di sini.Taruh kode atau text yang akan di sembunyikan di sini.Taruh kode atau text yang akan di sembunyikan di sini

Code sriptnya adalah :
 <br /><div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"><strong>Spoiler</strong>: <input style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" 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'; }" type="button" value="Open" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;">Taruh kode atau text yang akan di sembunyikan di sini</div> </div> </div>

2. Spoiler Model 2

Letakkan Kode yang disembunyikan disini

Code Scripnya adalah :
<br /><div id="spoiler"> <div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" type="button" name="button" value="LIHAT" /></div> <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">Letakkan Kode yang disembunyikan disini</div> <div id="hide"></div> </div>

3. Spoiler Model 3

LETAKKAN KODENYA DISINI

Code Scriptnya adalah :
 <br /><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" type="button" name="button" value="BUKA" /></div> <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"> <div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">LETAKKAN KODENYA DISINI</div> <div id="hide"></div> </div>

4. Spoiler Model 4
 

Letakan Apa Aja Yang Ingin Anda Pasang Di Sini

Code Scriptnya adalah :
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});}); </script> <style type="text/css"> #dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;} </style> <button id="butToggle">Klik Untuk Buka</button> <div id="dvt"> Letakan Apa Aja Yang Ingin Anda Pasang Di Sini</div>

Nah itu tadi sedikit dari saya tentang Macam-Macam Tombol Spoiler beserta code2nya,,, semoga bermanfaat ya sob...