16 April 2011

Tutorial 29# jquery tab menu accordian

Okeyh skarang kte blaja tuto yg dh popular..
Taw x amender nyh?
X.. Alah cyannyer...
Okeyh cbe tgk kat sidebar sofya
Yg ad tlis tagboard ngan Formspring tuh..
kan ble korang sentuh dye akan trun, kan?
Knape? Ingat magik?
huhu
So, are you ready kids!
Ayai, captain!
Go....

Ikut step nyh..

1) Bkk dashboard> design > page element > add gadget

2)copy kod nyh dan tampal...

<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#F80680;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</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">Tajuk 1</h5>
<div class="msg_body">

Masukkan kod disini. 1

</div>

<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">

Masukkan kod disini.2

<h5 class="msg_head">Tajuk 3</h5>
<div class=&
Align Left
quot;msg_body">

Masukkan kod disini. 3

</div>
</div>


3) Okeyh skarang tyme untuk edit Plak..

background-color:#F80680 => Ini warne background title tuh.. Tkar kod ikut ske korang
background-color: #F4F4F8 => Ini warne background accordian tuh..

masukkan kod di sin dengan tajuk tuh Rsenyer kkorang dah fham, kan?
okeylah tu jer maw cter..
Slamat mencube!!!

p/s: Soofiyah bru psg button like, likelah..=)


Photobucket

No comments:

Post a Comment

Awak comment saya sayang.. =)