Wednesday, November 17

JQuery: Accordion dengan JQuery untuk Menampilkan Berita

Plugin Jquery dapat digunakan agar terlihat lebih menarik. Accordion dengan menggunakn Jquery bisa menampilkan expandable/collapsible menu.

<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>

Dengan skrip di atas kita dapat membuat tag <h3> dan <p> dapat di show dan di hidden dengan animasi.
Tampilannya adalah sebagai berikut:









Silahkan dicoba, download source accordion di sini.

No comments:

Post a Comment

Pencarian Google