Cara Membuat Show/Hide menggunakan JQuery keren

Assalamualaikum pemirsa blogger. Pada sehat semua kan??

Kali ini aku mau kasi tutorial Cara Membuat Show Hide menggunakan JQuery. Yaa, Cara Membuat Show Hide menggunakan JQuery ini layaknya tombol show/ hide yang seperti biasanya. Namun yang ini sedikit berbeda dan sedikit lebih lembut. Oke deh, pasti penasaran yaa. Silahkan disimak, Cara Membuat Show Hide menggunakan JQuery.

1. Kalian login ke dasbor blogger kalian
2. Pilih Tata Letak>Tambah gadget> HTML/ java script
3. Kalian copy kode dibawah ini dan paste dikonten

<script type="text/javascript" src="http://afinzdi-quincy.googlecode.com/files/jquery.js"></script>

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

<style type="text/css">
{
    margin: 5px auto;
    width: 300px;
    font: Agency FB;
}
.accordion {
    width: 250px;
    border-bottom: solid 1px #696969;
}
.accordion h3 {
    background: #000 url();
    padding: 7px 15px;
    margin: 0;
    font: bold Agency FB;
    border: solid 1px #6969696;
    border-bottom: none;
    cursor: pointer;
}
.accordion h3:hover {
    background-color: #000;
}
.accordion h3.active {
    background-position: right 5px;
}
.accordion p {
    background: #000;
    margin: 0;
    padding: 10px 15px 20px;
    border-left: solid 1px #696969;
    border-right: solid 1px #696969;
}
</style>
<div class="accordion">
    <h3>Judul Pertama</h3>
    <p>Isi Judul Pertama</p>
    <h3>Judul Kedua</h3>
    <p>Isi Judul kedua</p>
   
</div>

keterangan :
Yang berwarna kuning adalah judul yang ada dibuttonnya nanti
dan yang berwarna merah adalah tulisan yang akan disampaikan

Share :

Tweet

More

Related Post