Cara Mebuat Link Show/Hide

Setelah membuat tutorial Membuat Tombol Show/Hide,saya membuat satu lagi tutorial yang mirip dengan tutorial Membuat Tombol Show/Hide tetapi tidak menggunakan tombol,tetapi link.Langsung aja simak tutorial ini.

Demo:

show <== Klik di sini

Yohoo!!

Seperti itulah contoh dari link show/hide.Kelebihannya bisa ganti style.Selain itu bisa dijadikan pengganti "Readmore".Kekurangannya agak repot kalau mau bikin Banyak.Di bawah ini adalah kodenya.

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>


<a id="displayText" href="javascript:toggle();">show</a><div id="toggleText" style="display: none">peek-a-boo</div>

Keterangan:
Yang merah,orange dan hijau itu untuk membedakan link yang satu dengan yang lain kalau mau dibuat banyak link.Bisa diganti sesuai keinginan.
Yang ungu dan pink itu tampilan linknya.
Sedangkan yang abu-abu itu text/gambar de-el-el/dan lain-lain yang akan muncul/sembunyikan saat link diklik.

Sekarang akan saya tunjukkan kode untuk membuat 2 link atau lebih.

 Link 1:

<script language="javascript">
function toggle1() {
var ele = document.getElementById("toggleText1");
var text = document.getElementById("displayText1");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>


<a id="displayText1" href="javascript:toggle1();">show</a>
<div id="toggleText1" style="display: none">Ini link 1</div>

Link 2 

<script language="javascript">
function toggle2() {
var ele = document.getElementById("toggleText2");
var text = document.getElementById("displayText2");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>


<a id="displayText2" href="javascript:toggle2();">show</a> <== click Here
<div id="toggleText2" style="display: none">Ini link 2</div>

Nah,bisa dilihat di situ perbedaannya (yang warna merah).Begitulah cara memasang 2 link.Kalau yang lebih dari 2 bisa diterapkan sendiri dan bisa merasakan kerepotannya.He2.Di bawah ini contoh dari 2 link di atas.


show

Ini link 1

show

Ini link 2

Lebih lanjut : http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/