Kotak Accordion Web 2.0 Site

"Accordion Effect" adalah salah satu benda yang penting di dalam sesebuah web atau blog terutamanya bagi yang mempunyai terlalu banyak kandungan di dalamnya. Apa itu "Accordion"? Kotak "Accordion" berfungsi menyimpan kandungan seperti widgets, links atau apa jua yang anda inginkan di dalam sebuah kotak. Jika anda klik pada kotak tersebut, isi kandungan di dalamnya akan dipamerkan. Ini akan menjimatkan ruang bar sisi (sidebar) anda. Caranya begini:-

Pergi ke Dashboard >> Layout >> Edit HTML dan masukkan kod di bawah SELEPAS tag </head>.

<script type="text/javascript" src="http://www.webdesignerwall.com/demo/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".accordion h3:first").addClass("active"); $(".accordion p:not(:first)").hide(); $(".accordion h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); }); }); </script> <style type="text/css"> .accordion { width: 480px; border-bottom: solid 1px #c4c4c4; } .accordion h3 { background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px; padding: 7px 15px; margin: 0; font: bold 120%/100% Arial, Helvetica, sans-serif; border: solid 1px #c4c4c4; border-bottom: none; cursor: pointer; } .accordion h3:hover { background-color: #e3e2e2; } .accordion h3.active { background-position: right 5px; } .accordion p { background: #f7f7f7; margin: 0; padding: 10px 15px 20px; border-left: solid 1px #c4c4c4; border-right: solid 1px #c4c4c4; } </style>

Kemudian anda klik "save templates".
Seterusnya, pergi ke bahagian Page Elements >> Add A Gadget >> HTML/Javascript.
Masukkan tag di bawah ke dalam kotak HTML/Javascript itu tadi.

<div class='accordion'>

<h3>Nama Kandungan (contoh:Post Terkini)</h3>

<p>
Kod Untuk Post Terkini
</p>

<h3>Nama Kandungan</h3>

<p>
Isi Kandungan
</p>

<h3>Nama Kandungan</h3>

<p>
Isi Kandungan
</p>

</div>

Untuk demo, lihat di SINI