Kode Script Untuk Tampilkan/Sembunyikan Konten Apapun

Tampilkan dan Sembunyikan (show/hide) identik dengan Buka dan Tutup (open/close). Sederhananya konten apapun yang ingin ditampilkan dan disembunyikan dapat menggunakan kode ini. Umumnya yang sering kita lihat pada setiap situs bagian Sidebar atau Navigasinya rata2 menggunakan metode buka tutup dan rata2 kodenya mirip2 seperti ini.

Dibawah ini contoh button yang apabila di klik konten akan terbuka dan di klik sekali lagi akan menutup.

<button onclick="kontenSaya()">Tampilkan/Sembunyikan</button>

<div id="kontainer" class="konten">

Konten disini.

</div>

Button diatas hanya berfungsi bila memasang Javascript dibawah ini.

<script>//<![CDATA[ 

function kontenSaya(){

var x = document.getElementById("kontainer");

if (x.className === "konten"){

x.className += " hide";

}

else

{

x.className = "konten";

}

} 

//]]></script>

Tanda kutip " dan hide sengaja diberi jarak satu spasi agar tidak mempengaruhi class 'konten'. Misal ".konten" memiliki width:90%, dengan tidak memberi spasi pada "hide" dia akan mempengaruhi ".konten" bisa2 seolah berubah menjadi width:100%.

Fungsi //<![CDATA[  bertujuan agar tanda kutip (") tidak berubah menjadi tanda petik (')

Class: "kontainer, hide, konten", bisa diubah sesuai selera.

Pasang JS diatas ke paling bawah dalam Template, dibagian atas </body>

Javascript diatas baru akan berfungsi setelah menambahkan CSS dibawah ini.

<style>

.konten{

height:0;

visibility:hidden;

overflow:auto;

transition:0.5s

}

.konten.hide{

height:auto;

visibility:visible

}

</style>

Jika digunakan di Blogger sebaiknya pakai "visibility: hidden" jangan "display: none". Mengapa?

1. Agar mudah dirender oleh sistem. Terkadang ada beberapa sistem yang menghapus DIV jika mendapati display:none.

2. Agar tidak memberatkan font yang berujung bikin situs jadi berat. Terkadang Font kesulitan mendeteksi teks jika terdapat display:none.

3. Agar dapat di crawl/index mesin telusur. Terkadang JS akan berubah menjadi link yang berpotensi jadi broken link.

Namun jika ingin memakai css "display", begini cssnya. Kalau pakai css ini, css visibility diatas tidak usah dipakai.

<style>

.konten{

display:none

}

.konten.hide{

display:block

}

</style>

Ini hanya css inti, tentu saja dapat ditambah lagi, misal:

.konten{

width..

padding..

margin..

dll.

}

Jika menggunakan Blogger, Pasang css ke bagian daerah <skin>. Semoga bermanfaat!