Hide/Show Elements Di Sidebar

Pernah tengok expandable posting x? Contoh kat blog Ana yang ini AlmansuQie. Cara membuatnya disini. Ok, kali ni kita nak buat hide/show widget pada sidebar pulak. Sekaligus dapat menjimatkan ruang. Redhwan ade tertanya2. Boleh juga gunakan cara ini untuk hide/show pautan.

Redhwan: Assalamualaikum..Tanye sikit, macam mana nak buat pautan kita pada sidebar boleh expand dan collapse macam blog archive?

1. Pertama masuk ke Layout => Edit HTML dan tambahkan kod berikut selepas kod ]]></b:skin>.

<style type="text/css">
.texthidden {display:inline}
.shown {display:block}
</style>
<script type="text/javascript">
document.write('<style>.texthidden {display:none} </style>');
</script>
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="shown") {
whichpost.className="texthidden";
}
else {
whichpost.className="shown";
}
}
</script>

2. Klik save template dan selesai di bahagian ini. Pergi ke bahagian page Elements => Add a Gadget => HTML/Javascript. Tambah kod ni..

<ul><a href="javascript:void(0);" onclick="expandcollapse('keyword')"> [+/-] Pautan</a></ul>
<ul class="texthidden" id="keyword">
<li><a href="http://link.com">Link 1</a></li>
<li><a href="http://link.com">Link 2</a></li>
<li><a href="http://link.com">Link 3</a></li>
<li><a href="http://link.com">Link 4</a></li>
<li><a href="http://link.com">Link 5</a></li>
</ul>

4. Tukarkan link2 berwarna merah dengan link Antum yer.. Text biru mesti nama yang sama. Warna ungu boleh ditukar jadi perkataan atau gambar. Yang ni khas untuk pautan. Untuk sembunyikan widget pulak buat macam ni.

<ul><a href="javascript:void(0);" onclick="expandcollapse('Cbox')"> [+/-] Kotak Jerit</a></ul>
<ul class="texthidden" id="Cbox">
...............kod cbox disini...............
...............kod cbox disini...............</ul>

5. Macam tu la jugak pada mana widget yer. Siap!! Selamat mencuba!!