Java Script - Ide Pembuatan Show Spoiler dan Hide Spoiler

Tutorial kali ini cukup sederhana, berikut ini adalah skrip yang saya gunakan :

<script type="text/javascript">

    //untuk menampilkan spoiler

    function show(id) {
        document.getElementById(id).style.display='block';
    }

    //untuk menyembunyikan spoiler
    function hide(id) {
        document.getElementById(id).style.display='none';
    }

</script>

Ket :

1. Fungsi show berfungsi untuk menampilkan spoiler.
2. Style.display='block' berfungsi untuk menambahkan style css display block pada dokumen atau divisi yang diinginkan.
3. Fungsi hide berfungsi untuk menyembunyikan spoiler.
4. Style.display='none' berfungsi untuk menambahkan style css display none pada dokumen atau divisi yang diinginkan.

Dalam penerapannya

<script type="text/javascript">   
    function show(id) {
        document.getElementById(id).style.display='block';
    }
    function hide(id) {
        document.getElementById(id).style.display='none';
    }

</script>

<p><a href="#" onclick="show('namaId'); return false;">Lihat panel</a> | <a href="" onclick="hide('namaId'); return false;">Sembunyikan panel</a></p>

<div id="namaId" style="display:none">

    <p>Ini adalah konten yang ditampilkan dan disembunyikan</p>

</div>

Fungsi dari onclick="show('namaId'); adalah untuk memanggil function dalam javascript yang telah dibuat sebelumnya.

Setelah berhasil, coba ganti property display dengan visibility dan ganti pula value 'block' dan 'none' dengan 'visible' dan 'hidden'. Selamat mencoba.