Cara Membuat Slidetoggle() Dengan Jquery

Halo semuanya, ketemu lagi nih kita. Sekarang sedang memasuki musim hujan kembali teman-teman. Pasti akan membuat kita basah, ya iyalah karena hujan itu yang turun air halah apasih haha. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Slidetoggle() Dengan Jquery.

Slidetoggle() ini berfungsi juga sebagai collapse teman-teman. JIka beberapa dari kalian mengambil jquery collapse itu dari plugin atau sebagainya. Disini kalian tidak perlu lagi untuk mengambil pluggin-pluggin. Karena sudah bisa kalian buat sendiri. Oke langsung saja, berikut Cara Membuat Slidetoggle() Dengan Jquery.

Pertama-tama silahkan teman-teman buat file index.html nya.

Kemudian isi di tag <head> dengan tag <script>, lalu buat atribut src=”” berisikian library jQuery nya.

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"

Setelah itu, di dalam tag <body> silahkan teman-teman buat tag seperti berikut,

<a href="#flip" id="flip">Klik disini</a>
<div id="panel">Hello world!</div>

Dan buat CSS nya seperti ini,

#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
    margin-top:5px
}

Terakhir silahkan teman-teman buat script slidetoggle() nya pada sebelum tag </body>,

<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("fast");
    });
});
</script>

Bagaimana teman-teman untuk Cara Membuat Slidetoggle() Dengan Jquery nya? Mudah bukan?

Semoga bermanfaat, terima kasih

Cara Membuat Slidetoggle() Dengan Jquery

Kategori