28 May 2011

Tutorial Accordian Tab Menu

Assalamualaikum guys .. Hari ni ade sorang kakak mintak tolong dekat Daya dalam shoutbox..




Kakak Ieyza mintak Daya buat tutorial pasal Accordian Tab .. Ape tu ?? Ha tengok macam dekat bawah ni


SEBELUM


SELEPAS


See ? Die ke bawah kan ?
Orait jom Daya kongsi macam mana nak buat..

Dashboard -> Design -> Add Html -> html/JavaScript

 Copy paste code dekat bawah ni dalam ruangan html/javascript tu tadi


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

Note 

Yang warna Hijau , korang tukar dengan tajuk tab yang korang nak
Yang warna Merah , korang pastekan code korang ( contoh: shoutbox, about me )

Dah siap ? Okey save ..Done (!)

Fahamkan ? :) ..kalau faham bagus , kalau tak faham tanye okey ...




22 comments:

ieyza afieyna said...

ok2.thanx..

aidanadhira said...

kenapa x jadiey! huhuh :(

Daya The Sixth ! said...

@aidanadhira Maybe code awak tak betul la .. try lagi okey :')

apismyra said...

dah jadi..thx daya for your tuto..xubah pape pun code..tibe2 jadi sndri..pelik..by t way..thx again

m e e r a :) said...

x jadi pon :(

Daya The Sixth ! said...

@m e e r a :) Ye mmg skrng dh tak jadi .. code die mcm berubah .. nnti Daya try cari yg baru :)

cik mun said...

xjadi jugak..huhu

razieayen said...

errr . dah byk kali la buat but x jadik2 jgak . ==' siap de gmbar lg tu . camner nak letak gmbar tu ekk ? x reti lgsg la ? aja bley ?

Daya The Sixth ! said...

@razieayen Code ni memang dah tak jadi laa rasenye :(

Intan Nadila said...

Jadi , tapi bila tekan tu tak turun mcm daya punye pon . dye stay je . mcm mne erk ?

Daya The Sixth ! said...

@Intan Nadila Daya first time buat dulu pon mcm tu , teruskan mencuba :)

priya said...

kak, apasal x jadi??

cintaCOKLAT said...

kak daya , mcm mne nk letk gmba kite tu ea ? harap dpt mmbntu .

cintaCOKLAT said...

kak , cm ne nk buat ada gmba kite 2 ea ? nk ltak cm ne ? hhheh hrp dpt mmbntu ~

aecha slamber..:D said...

code about me tak dapt pon@tak jdi lorh

Daya The Sixth ! said...

@priya Code die salah tu . kott . hehe

Daya The Sixth ! said...

@cintaCOKLAT Yang ade gambar ? Tak faham laa .

Daya The Sixth ! said...

@aecha slamber..:D Yang laen jadi ke ?

cheezy_chieze said...

daya code yg bwh tu ada merah hijau tu ltak dkat kotak html shoutbox about me tu erk???

iMieMiey ~ said...

alaa, tak jd lahh kak. ce tgk blog sye. jd cam tu lak. dy jd yang SELEPAS. yang SEBELUM tak jadi..

Nur Izurin Iskandar said...

Tak faham -.-

ciwty sajjeh said...

daya ta jd laa ,..selepas jadi..sebelum ta jd..:(