blog cepi gunadi

Cara Membuat Efek Toggle Show Hide Expand Collapse

Baiklah kita langsung saja kepembasan Cara Membuat Efek Toogle Show Hide Bisa Lihat Demonya Dibawah ini :


+ show / hide

Berikut Langkah-langkah pemmbuatannya.

1. Pasang Javascript Berikut Dibagian header blog sobat.

<script type="text/javascript">
    function showhide(toggle) {
        //change target element mode
        var elementmode = document.getElementById(toggle).style;
        elementmode.display = (!elementmode.display) ? none : ;
    }
    function openclose(toggle) {
        showhide(toggle);
    }
</script>

2. Terakhir pasang Kode HTML berikut ini, dibagian kamu ingin meletakkan Toggle Show Hide nya.

<a href="javascript:openclose(toggle);" style="text-decoration: none; padding: 3px 7px 3px 7px; border: 1px solid #ccc;">+ show / hide</a>
<div id=toggle style=display: none; padding: 10px; background: #F4FDA6;>
<em>"Letakkan Teks ato kode anda disini"</em>
</div>

NB: Ganti Teks yang berwarna merah

3. Selesai, Mudah bukan.hehee,..