hello teha nak buat tutorial.namenye accordian tab menu.macam mana?ok
ok fist macam biasa pergi dashboard>page element>add gadjet>html
copy and paste kod bawah ni dekat html

<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:#FAAFBA;
margin:1px;
}
.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"><center>TAJUK TAB 1</center></h5>
<div class="msg_body">
CODE TAB 1

</div>
<h5 class="msg_head"><center>TAJUK TAB 2</center></h5>
<div class="msg_body">
CODE TAB 2

</div>
<h5 class="msg_head"><center>TAJUK TAB 3</center></h5>
<div class="msg_body">
CODE TAB 3

<p></p>
</div></div>

 ok.done
OLDER / NEWER

hello ..my name is norfathehah.. birth at 21sept 1994.17 years old..study at smk permas jaya 3..165 cm with 43kg weight..live in johor bahru.i am childish and tough-minded..love to try something..i dont care on what people say about me.i love make an experiment to my fashion.love photographying too..i am stuborn and talkactive girl..I'M IN LOVE WITH MUHAMAD ZAIN AHMAD..a little fussy in the various..whatever it is i am just an ordinary girl.

http://www.fatheha.co.cc

Designer : Cynna
Editor : Fatheha
materials: Various japanese site
icons: SugarPink
Editing Program: Photoscape
scripts: Dynamic Drive
color hex codes: Color Combos
host: BLOGGER.COM | PHOTOBUCKET.COM


Affies

HOST:BLOGGEROWNER:FATEHAHSITE NAME:FATHEHAH BAHRIBEST VIEWED:GOOGLE CHROMEIcon by : Applepine Sozai by : Hushstar.net Images by : WeHeartIt

hello teha nak buat tutorial.namenye accordian tab menu.macam mana?ok
ok fist macam biasa pergi dashboard>page element>add gadjet>html
copy and paste kod bawah ni dekat html

<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:#FAAFBA;
margin:1px;
}
.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"><center>TAJUK TAB 1</center></h5>
<div class="msg_body">
CODE TAB 1

</div>
<h5 class="msg_head"><center>TAJUK TAB 2</center></h5>
<div class="msg_body">
CODE TAB 2

</div>
<h5 class="msg_head"><center>TAJUK TAB 3</center></h5>
<div class="msg_body">
CODE TAB 3

<p></p>
</div></div>

 ok.done
Older Post | Newer Post