Memasang Accordion Dengan Jquery dan Css

Memasang Accordion Dengan Jquery dan Css
sobat udah pernah liat blog teman sobat sidebar'a bisa buka,lalu menutup??ini dia trik'a namanya Accordion,kalau sobat belum tau seperti apa Accordion,sobat bisa lihat contoh'a disini dengan Accordion kamu bisa mengurangi
tempat blog kamu.trik ini tdk akan memberatkan blog kq.ok,dah langsung aja saya kasih tau cara'a n_n



Pertama,masukan kode HTML ini ke blog kamu...
isi widget yang kamu iginkan.contoh:bukutamu,blogroll,link dan sebagai'a

<div class="container">
<h2 class="acc_trigger"><a href="#">Menu1</a></h2>
<div class="acc_container">
<div class="block">


Isi widget/text kamu disini

</div>
</div>

<h2 class="acc_trigger"><a href="#">Menu2</a></h2>
<div class="acc_container">
<div class="block">


Isi widget/text kamu disini

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

kemudian,masukan CSS ini di template sobat

h2.acc_trigger {
padding: 0;
margin: 0 0 5px 0;
background: url(http://www.sohtanaka.com/web-design/examples/accordion/h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}


Note:url gambar bisa kamu ganti sesuai kebutuhan.atau dapat diganti dengan CSS 3

Memasang Accordion Dengan Jquery dan Css
Memasang Accordion Dengan Jquery dan Css


setelah itu,copy paste script ini di bawah kode ]]></b:skin>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});

});
</script>



selesai deh...
selamat mencoba n_n

Komentar

  1. Wah keren nich infonya, saya coba dulu mudah - mudahan cocok

    BalasHapus
  2. Modif memang bikin Ramping Blog....Keren Ni gan

    BalasHapus
  3. wawww blognya keren sobb..
    mksi infonya bermanfaat...

    BalasHapus
  4. wow...ini bikin berat blog gak gan..takutnya bikin berat...but nice trick

    BalasHapus
  5. ok gan,silakan dicoba n_n
    asal jangan gunakan script terlalu banyak,ga akan berat gan

    BalasHapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  7. seep kk jo , sangat keren , eh kk jo tutorial yg fullpost itu mna hayo ?? n_n

    BalasHapus
  8. Ok kan saya coba makasih infonya gan...dah tah folow...

    BalasHapus
  9. Wah keren nih artikelnya, makasih sob saya coba dlu ya.

    BalasHapus
  10. manthap gan,.saya tunggu artikel terbarunya

    BalasHapus
  11. jo itu masukin HTML nya langsung ke edit Html ?

    BalasHapus
  12. biar gampang masukin widget'a,di elemen halaman aja bro n_n

    BalasHapus
  13. mf ,klo masukin kode cssnya di edit html bkn ???

    BalasHapus
  14. LINK contohnya EROR yah? ke redirect ke 80 apa gitu :)

    BalasHapus
  15. Iya,maaf sumber'a uda expired=="
    untuk contoh sbenar'a ada di template Uchiha Sasuke :)

    BalasHapus
  16. Terima kasih infonya, Bang Jo... Tp ada yg ingin saya tanyakan... Bagaimana cara membuat accordion sidebar seperti yg ada di tema DeSu2 dan DAL?

    BalasHapus

Posting Komentar

"Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

"Sorry your comment will not be replied, because this blog has been inactive. Thank you"

Postingan populer dari blog ini

K-ON!! Blogger Template

Shiroi Blogger Template

Unbreakable Machine Doll Blogger template