Tutorial : Accordian Tab Menu
Wednesday, July 13, 2011 // Wednesday, July 13, 2011
Haloooo :) harini nak buat tuto laen pulak . hihi ;) kalini nak buat tuto accordian tab menu . alaa ~ yang boleyy slide tu . macam dekat bawah niyy :
Dashboard >> Design >> Add Gadget >> HTML/JavaScript
then ,
<style type="text/css">h5 {font-family: trebuchet-ms, arial, tahoma;font-size: 13px;padding: 0 0 1em;font-weight:bold;color: #000000;}.msg_list {list-style: none;margin: 0;padding: 0;width: 100%;}.msg_head {padding: 5px 10px;cursor: pointer;position: relative;background-color: #000000;margin:1px;-moz-border-radius: 35px;border-radius: 35px;}.msg_body {padding: 5px 10px 15px;background-color: #000000;}</style><script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script><script type="text/javascript">$(document).ready(function(){//hide the all of the element with class msg_body$(".msg_body").hide();//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked$("#firstpane h5.msg_head").click(function(){$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");});//slides the element with class "msg_body" when mouse is over the paragraph$("#secondpane h5.msg_head").mouseover(function(){$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");});});</script><div class="msg_list" id="secondpane"><h5 class="msg_head"><center>Tajuk 1</h5></center><div class="msg_body"><center>code untuk tajuk 1 #045FB4</div><h5 class="msg_head"><center>Tajuk 2</h5></center><div class="msg_body">code untuk tajuk 2 #045FB4</div><h5 class="msg_head"><center>Tajuk 3</h5></center><div class="msg_body">code untuk tajuk 3 #045FB4</div></div>
pastekan code diatas niyy dekat HTML/JavaScript :) macam biase tak payah tulis title dye kayy .
Meaning :
Hijau : warne tulisan yang korang nak .Coklat : warne background .Purple : warne background isi .Bold : Tajuk/titleMerah : isi dyer . ikut suke lar ~ nk tulis ape ..
DONE ! :) dah siap , save !
P/s : Tak faham tanya ! nak copy macam biasa :) (CTRL + C)