Cara membuat tombol hide show elemen (spoiler) dengan javascript

Assalamu'alaikum

Berjumpa lagi dengan saya Ifan Irfansyah si admin kece yang lagi belajar ngeblog.

Kali ini saya akan memposting Cara membuat tombol hide show elemen / spoiler dengan menggunakan css.

Tombol spoiler adalah tombol yang digunakan untuk menyembunyikan objek, bisa berupa gambar, kalimat, syntax, dll. Biasa digunakan untuk menghemat halaman, mempercantik blog, sampai menjahili pengunjung.

Tombol spoiler bisa dibuat dengan menggunakan javascript ataupun jquery. Namun yang akan saya terangkan kali ini adalah dengan menggunakan javascript. Alasannya tentu lebih mudah.

Sebelumnya pastikan dulu wapbuilder atau blogbuilder sobat support javascript.

Inilah syntax yang digunakan

<div id="IRF-SPOILER">

<div><input style="font-size: 11px; 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 =

'Sembunyikan'; } else

{ this.parentNode.parentNode.getElementsByTagName
('div')['show']

.style.display = 'none';

this.parentNode.parentNode.getElementsByTagName
('div')['hide']

.style.display = '';

this.innerText = '';

this.value = ' Tampilkan '; }

" name="button"

type="button"

value=" Tampilkan " /></div>

<div id="IRF-SHOW"

style="border: 1px solid white;
display: none;
margin: 5px; padding: 2px;

width: 98%;">

Masukan teks/gambar/video/Syntax disini...

</div><div id="IRF-HIDE"></div></div></div>

<div><div style="margin-bottom:<br /> 2px;"><nput<br /> value="Tampilkan" class="show" onclick="if<br /> (this.parentNode.parentNode.<br /> getElementsByTagName('div')<br /> [1].getElementsByTagName('div')<br /> [0].style.display != '')<br /> { this.parentNode.parentNode.<br /> getElementsByTagName('div')<br /> [1].getElementsByTagName('div')<br /> [0].style.display = '';<br /> this.innerText = ''; this.value =<br /> 'Sembunyikan'; } else<br /> { this.parentNode.parentNode.<br /> getElementsByTagName('div')<br /> [1].getElementsByTagName('div')<br /> [0].style.display = 'none';<br /> this.innerText = ''; this.value =<br /> 'Tampilkan'; }" type="button"></<br /> div><div><div<br /> style="display: none;"><br /> <br /> Masukan teks/gambar/syntax disini<br /> <br /> </div></div></div>