ICanBeYourHeartBeat♥

Jquery Accordion Menu Tab

1. Pergi dashbord-->Design-->Add a gadget-->Html javascript
2. Copy dan paste code bawah ini kat html javascript.



<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">Tajuk 1</h5>

<div class="msg_body">


Masukkan kod /text disini

</div>


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

<div class="msg_body">

Masukkan kod/text disini

</div>

</div>
Title font colour : #ffffff
Background title box : #FAAFBA
Background accordion box : #FFFFFF

Colour oren tu untuk tajuk tab menu korang dan colour merah tu untuk korang masukkan text atau kod.

Sebelum terlupa Pariz nak cakap, tab menu ni tak boleh pasang lebih daripada dua sebab bila korang pasang dua, tab menu yang sebelum ni tak akan berfungsi. DAN, bila paste code tu JANGAN click RICH TEXT okey? Sebab bila korang click tab menu tu pun tak akan berfungsi jugak.

3. Kalau dah habesen !, click save.

Good luck! :)

Credits: maribinablog.bs.com & Anis Diyana

« Newer PostOlder Post »