Tutorial Jquery Accordian Tab Menu.
Posted on Friday, June 3, 2011| ✎ 0 Awesome

hai hai!! :D.. hepi pulak hari ni.. thanks to.............................. coz bagi anis main sepuas anis nk main blog..!! thanks kk..!! hehe.. now anis nk buad tutor,, puas pulak kalo tak buad..!! anis just nk kumpul banyak3.. tuto :).. ahaks..! hari kite nk buad tuto?? =

Tutor : Jquery Accordian Tab Menu.


ha!! besar xxx??: anis sengaja suh korang nampak hahaha -_-"!! heheehe

jom start!!

1) Dashboard > Design > Add Gadget > HTML/Javascript.
Copy then paste code bawah ni dekat 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:#FFB6D6;
margin:1px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;
}
</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>

Anis'note:

  1. Merah tu warna tulisan kat tab menu tu.
  2. Warna oren ialah background tab menu.
  3. Warna biru pulak untuk background isi tab menu tu. 
  4. Tajuk 1Tajuk 2 & Tajuk 3 tu isi ikut suka hati korang.
  5. Isi-2 tajuk 12 & 3 pulak ikut tajuk korang tu lah.

SORRY TIRU AYAT KAK NANA TERUS..!! :D...

credit to: kak nana
« Newer Posts | Older Post »
I'm Girl
Assalamualaikum:)
My name Anis for short :) My age is 12 years old! UPSR IS COMING @_@ just follow me if you like this blog and i will follow back :D
|
Facebook


My Heart♥
Creadit
Please notice me! if i not credit your stuff :)
Designer : Anis Maisarah
Background : Una
Header : Iyra
Doodle : Apple
Best View : Google Chrome