Tutorial JQuery Accordian Drop Down Menu

Assalamualaikum & wah! panjang kan tajuk tuto kali ni? Drop Down Menu ni aku pernah pakai dulu *tak tanya pun?*  tapi dah delete,, bukan tak suka! suka sgt! tp mcm tak sesuai dgn blog baru aku ni pulak! aku takda image untuk tu kali ni! sory yah!

aku nih, mmg suka membebel kan? aku sendiri fedap ngan perangai aku nih! hahah! korang mesti perasan kan? aku ni bertutoling je hari nih.. hehehe

1. Dashboard > Design > Add A Gadget > HTML/Javascript

2. Copy segala benda di bawah & paste di situ

<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:#bbbbbb;

margin:1px;

-moz-border-radius: 35px;

border-radius: 35px;

}

.msg_body {

padding: 5px 10px 15px;

background-color:#aaaaaa;

}

</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">

<center>

Isi dalam tajuk 1

</div>

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

<div class="msg_body">

Isi dalam tajuk 2

</div>

<h5 class="msg_head">Tajuk 3</h5>

<div class="msg_body">

Isi dalam tajuk 3

</div>

</div&gt;

• merah tu warna tulisan dekat drop down menu korang *tukar warna di SINI*
• biru tu pulak untuk background drop down menu
• purple tu pulak background isi drop down menu awak sume
• Tajuk 1,2 & 3 tu tulis la ape ape yg berkaitan
• Isi tajuk 1,2 & 3 tu, tegok lah tajuk korang tu. contoh:

tajuk die: speak here

isi die pulak: masukkan kod shoutmix/cbox korang

that's all! easy! just ikut betul betul.. Semoga Berhasil! tak jadi komen di ruangan komen ye! thank you! Assalamualaikum!