Langsung ke konten utama

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

Postingan populer dari blog ini

Karya Seni Patung Gregorius Sidharta

Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia 11 12 09 Gregorius Sidharta G Sidharta Tokoh Seniman Patung Indonesia G Sidharta The Concept Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia Pengawal Batas Indonesian Visual Art Archive Karya Karya G Sidharta Homage Artdig Gregorius Sidharta Soegijo Homegallery Posts Facebook Indonesian Visual Art Archive Karya Karya G Sidharta Gregorius Sidharta Ilmuseni Com Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia 11 12 09 Gregorius Sidharta Soegijo Homegallery Posts Facebook Karya Seni Pembentuk Identitas Negara Indonesian Visual Art Archive Karya Karya G Sidharta Sejarah Awal Dan Perkembangan Seni Patung Di Indonesia Lukisan Berma...

Seni Lukis Impresionisme

Impresionisme Pengertian Ciri Tokoh Contoh Karya Analisis Apa Yang Dimaksud Dengan Aliran Impresionisme Seni Rupa Apa Itu Impresionisme Sejarah Seni Lukis Impresionisme Dunia Lukisan Javadesindo Art Gallery Sejarah Aliran Seni Apa Yang Dimaksud Dengan Aliran Impresionisme Seni Rupa Seni Rupa Impresionisme Dan Ciri Ciri Lukisannya Bilik Seni Impresionisme Pengertian Ciri Tokoh Contoh Karya Analisis Aliran Seni Lukis Impresionisme Thegorbalsla Siapa Saja Tokoh Seni Lukis Aliran Impresionisme Seni Rupa Impresionis Aliran Yang Awalnya Tertolak Kompasiana Com Impresionisme Definition And Synonyms Of Impresionisme In The Media Pembelajaran Lukisan Impresionisme Impressionism Mengapresiasi Lukisan Impresionisme Karya Leonid Afrem...

Seni Lukis Patung

Cabang Cabang Seni Rupa Seni Patung Sening Lukis Seni Grafis Dk Blog Contoh Karya Seni Lukis Patung Beserta Apresiasinya Seni Rupa Murni Nusantara Dan Mancanegara Art Lesson In Smp Seni Patung Beserta Pengertian Fungsi Teknik Contohnya Seni Budaya Sejarah Perkembangan Seni Rupa Lukisan Patung Liberty Berjilbab Tuai Kontroversi Dream Co Id Apa Itu Seni Patung Tambah Wawasanmu Tentang Dunia Seni Di Sini Di Balik Senyap Tampilkan Karya Seni Patung Dan Lukisan Bagaimana Sejarah Seni Rupa Yunani Kuno Seni Rupa Dictio Pengertian Dan Contoh Seni Rupa Murni Genggam Internet Dk Blog Contoh Karya Seni Lukis Patung Beserta Apresiasinya Pameran Seni Lukis Fotografi Dan Patung Hadir Selama Sepekan Di Gambar Wanita Monumen Patung Kesedi...