Membuat Tab Menu Acordion Posting

Berikut adalah cara membuat tab acordion posting

Tab acordion itu seperti ini.

Lembar Pertama

Latihan01

Sekalian saja di kasi contoh menu accordion yah

Disini kolom tab pertama, isi dengan apasaja yang kamu mau.

Lembar Ke Dua

Lembar Ke Tiga

Cara membuatnya kamu cukup copy dan pastekan kode di bawah ini di posting kamu, ganti isinya sesuka kamu
.

<div id="accordion">
<h2 class="current">
Lembar Pertama</h2>
<div class="pane" style="display: block;">
<img alt="JavaScript tools" src="http://i1191.photobucket.com/albums/z464/izoel1/close3.png" style="float: left; margin: 0 15px 15px 0;" /> <h3>
Latihan01</h3>
<strong>Sekalian saja di kasi contoh menu accordion yah</strong>

<div style="clear: both;">
Disini kolom tab pertama, isi dengan apasaja yang kamu mau.</div>
</div>
<h2>
Lembar Ke Dua</h2>
<div class="pane">
<h3>
Vestibulum ante ipsum</h3>
Yang ini lembar ke dua. latian membuat acordion http://alexander-zulkarnain.blogspot.com</div>
<h2>
Lembar Ke Tiga</h2>
<div class="pane">
<h3>
Curabitur vel dolor</h3>
Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna, non vulputate libero justo nec sem. Nullam arcu. Donec pellentesque vestibulum urna. In mauris odio, fringilla commodo, commodo ac, dignissim ac, augue.</div>
</div>
<style type="text/css">
/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
background:#333 url() 0 0;
width: 300px;
border:1px solid #333; -background:#666;
}
/* accordion header */
#accordion h2 {
background:#000 url(https://lh3.googleusercontent.com/--w_8XHUFwrs/TbaC5Ks4cDI/AAAAAAAABAk/tOxpBSnXi_w/s288/line.png);
margin:0;
padding:5px 15px;
font-size:14px;
font-weight:normal;
border:1px solid #fff;
border-bottom:1px solid #ddd;
cursor:pointer; }
/* currently active header */
#accordion h2.current {
cursor:default;
background-color:#fff;
}
/* accordion pane */
#accordion .pane {
border:1px solid #fff;
border-width:0 2px;
display:none;
height:180px;
padding:15px;
color:#fff;
font-size:12px;
}
/* a title inside pane */
#accordion .pane h3 {
font-weight:normal;
margin:0 0 -5px 0;
font-size:16px;
color:#999;
}
</style>
<script src="http://izoeljquerytools.googlecode.com/files/jquery.tools.min.js">
</script>
<script type="text/javascript">
$(function() {
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>

.
Silakan mencoba, semoga berhasil...

Salam blogger :)

Posted in: Sharing TKJ.com