Accordion Sederhana dengan jQuery
Yang menarik dari akordion dengan jQuery ini adalah bahwa metode ini sangat sederhana dan tidak memiliki pembatasan, sehingga memungkinkan untuk beradaptasi dengan desain apapun.
Demonstrasi
Konten Benner
Jejaring Sosial
Dengan Iframe
Berisi Texts
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut nisi quis magna convallis auctor eget sed sapien.
Untuk membuat Accordion seperti demonstrasi tersebut, langkah pertama yang dapat anda lakukan adalah dengan menambahkan jQuery versi terbaru berikut ini dan anda dapat meletakannya diatas kode
</head>jQuery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>
Javascript function
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#accordions h3:first").addClass("active");
$("#accordions div:not(:first)").hide();
$("#accordions h3").click(function(){
$(this).next("div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
//]]>
</script>
//<![CDATA[
$(document).ready(function(){
$("#accordions h3:first").addClass("active");
$("#accordions div:not(:first)").hide();
$("#accordions h3").click(function(){
$(this).next("div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
//]]>
</script>
Kode CSS
<style type="text/css">
#accordions {
width:510px;
}
#accordions h3 {
-moz-border-radius: 3px;
-moz-box-shadow: 0 0 10px #444 inset;
background-color: #9AA1F5;
color: #6D76AF;
cursor: pointer;
font-family: Tahoma;
font-size: 17px;
font-weight: normal;
height: 1.7em;
line-height: 1.7em;
margin: 0 0 2px;
padding: 0 20px;
position: relative;
}
#accordions h3:hover {
-moz-box-shadow: 0 0 10px #000 inset;
background-color: #878EF5;
color: #FFF;
}
#accordions h3 span {
background: transparent url(http://archivesiugi.googlecode.com/files/demo_acordeon.gif) no-repeat right top;
display: block;
height: 16px;
position: absolute;
right: 20px;
top: 7px;
width: 16px;
}
#accordions h3.active span {
background-position: right bottom;
}
#accordions div {
background-color: #F2ACF1;
border: 1px dotted #666;
color: #D17224;
font-family: Georgia;
font-size: 13px;
line-height: 1.5;
margin: 10px;
padding: 10px;
}
</style>
width:510px;
}
-moz-border-radius: 3px;
-moz-box-shadow: 0 0 10px #444 inset;
background-color: #9AA1F5;
color: #6D76AF;
cursor: pointer;
font-family: Tahoma;
font-size: 17px;
font-weight: normal;
height: 1.7em;
line-height: 1.7em;
margin: 0 0 2px;
padding: 0 20px;
position: relative;
}
-moz-box-shadow: 0 0 10px #000 inset;
background-color: #878EF5;
color: #FFF;
}
background: transparent url(http://archivesiugi.googlecode.com/files/demo_acordeon.gif) no-repeat right top;
display: block;
height: 16px;
position: absolute;
right: 20px;
top: 7px;
width: 16px;
}
background-position: right bottom;
}
background-color: #F2ACF1;
border: 1px dotted #666;
color: #D17224;
font-family: Georgia;
font-size: 13px;
line-height: 1.5;
margin: 10px;
padding: 10px;
}
</style>
Kode HTML
<div id="accordions">
<h3>Konten Benner<span></span></h3>
<div>
<a href="http://gan.doubleclick.net/gan_click?lid=41000000034789999&pubid=21000000000551669"><img src="http://gan.doubleclick.net/gan_impression?lid=41000000034789999&pubid=21000000000551669" border=0 alt=""></a>
</div>
<h3>Jejaring Sosial<span></span></h3>
<div style="text-align:center;">
<a title="Dahe Ugi di Twitter" target="_blank" rel="nofollow" href="http://twitter.com/dahe_ugi"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK4w7QUUtbnQN2sDtYtT3GvWXUV0NL681NwqzXROc2q-l-iFox2UJjBlwviqt4Fras1_Jw5q-WpDAajxIlmBNjJOoF1oLaNUWlcAWDnrZvDcXoRbUKaCNCMz_-8ADjGsAooV8Lm8HmUiY/s0/MPTW.png"></a><a title="Canel YouTube" target="_blank" rel="nofollow" href="http://youtube.com/user/caprt3a"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRCwvvwRcFl4Ff6RrmvEvFL0aQ_WhfncyWvgr0F65NS1wnEzyvm9egAH1pbAz9p9fNfisX1K0d-IAfKmjEx-DtsnlvyPPGZp96MP8bYfQFon6IowVkRGhm0ULXCI9JdkP9lVhSfWa1Cys/s0/MPYT.png"></a><a title="Halaman Facebook" target="_blank" rel="nofollow" href="https://www.facebook.com/pages/Buku-Catatan-si-Ugi/284364121788"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAvrFQuJez7W8XBqwbMo-kQ3QHQt0HTlwy7xf5yMrfNuLZpGC4mFJyGy7EBeVHBbLjEz-40CkBoM_SIc4B8IP0g3cCdMt1RB10CfKQlUMdx-WFFcD6QJRpEOPrxsQ4hLQM3Q5fECIsD-o/s0/MPFB.png"></a>
</div>
<h3>Dengan Iframe<span></span></h3>
<div style="text-align:center;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBuku-Catatan-si-Ugi%2F284364121788&width=292&colorscheme=light&show_faces=true&border_color&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe>
</div>
<h3>Berisi Texts<span></span></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut nisi quis magna convallis auctor eget sed sapien.
</div>
</div>
<h3>Konten Benner<span></span></h3>
<div>
<a href="http://gan.doubleclick.net/gan_click?lid=41000000034789999&pubid=21000000000551669"><img src="http://gan.doubleclick.net/gan_impression?lid=41000000034789999&pubid=21000000000551669" border=0 alt=""></a>
</div>
<h3>Jejaring Sosial<span></span></h3>
<div style="text-align:center;">
<a title="Dahe Ugi di Twitter" target="_blank" rel="nofollow" href="http://twitter.com/dahe_ugi"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK4w7QUUtbnQN2sDtYtT3GvWXUV0NL681NwqzXROc2q-l-iFox2UJjBlwviqt4Fras1_Jw5q-WpDAajxIlmBNjJOoF1oLaNUWlcAWDnrZvDcXoRbUKaCNCMz_-8ADjGsAooV8Lm8HmUiY/s0/MPTW.png"></a><a title="Canel YouTube" target="_blank" rel="nofollow" href="http://youtube.com/user/caprt3a"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRCwvvwRcFl4Ff6RrmvEvFL0aQ_WhfncyWvgr0F65NS1wnEzyvm9egAH1pbAz9p9fNfisX1K0d-IAfKmjEx-DtsnlvyPPGZp96MP8bYfQFon6IowVkRGhm0ULXCI9JdkP9lVhSfWa1Cys/s0/MPYT.png"></a><a title="Halaman Facebook" target="_blank" rel="nofollow" href="https://www.facebook.com/pages/Buku-Catatan-si-Ugi/284364121788"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAvrFQuJez7W8XBqwbMo-kQ3QHQt0HTlwy7xf5yMrfNuLZpGC4mFJyGy7EBeVHBbLjEz-40CkBoM_SIc4B8IP0g3cCdMt1RB10CfKQlUMdx-WFFcD6QJRpEOPrxsQ4hLQM3Q5fECIsD-o/s0/MPFB.png"></a>
</div>
<h3>Dengan Iframe<span></span></h3>
<div style="text-align:center;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBuku-Catatan-si-Ugi%2F284364121788&width=292&colorscheme=light&show_faces=true&border_color&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe>
</div>
<h3>Berisi Texts<span></span></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut nisi quis magna convallis auctor eget sed sapien.
</div>
</div>
Selesai, semoga bermanfaat.
sumber: vagabundia
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon