Monday, 24 January 2011

Show Hide menu dengan menggunakan java script pada blog

Log Masuk blog >> Klik Design >> Klik Edit HTML
Pastikan button Expand Widget Templates tidak di tandakan
Langkah Pertama
Copy Script ini dan pada sebelum  </head>
<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>

Save template


Langkah Kedua
Klik Design >> add gadget >> kemudian pilih html dan java script 
Paste code ini 
<a href="javascript:toggle();" id="displayText">Show/Hide</a>
<div id="toggleText" style="display: none;">This is Hidden Text</div>



Untuk tambah content tambah ajer pada This is Hidden Text
Untuk gantikan show dan hide gantikan pada kedua - dua langkah tersebut


0 comments:

Post a Comment