Basic Pembuatan Spoiler!

Maksud saya kali ini adalah untuk berbagi tentang bagaimana cara membuat Link spoiler dengan mudah! mengapa saya katakan basic? karena hanya script yang pada intinya saja yang akan saya share di sini, setelah itu bisa sobat bisa kreasikan sendiri ..

Demo Spoiler

Untuk Demo-nya silahkan sobat lihat & praktekan langsung di : JSFiddle.net

Pemasangan

Untuk pemasangan pastikan sobat sebelumnya sudah menyimpan 1 jQuery Library, jika belum silahkan simpan kode jQuery libray di bawah ini sebelum kode </head> :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Pemasangan jQuery pada template cukup 1 saja. Apabila ada beberapa versi jQuery library, maka efek-efek tidak akan berjalan.

Lanjut ke Langkah Pertama : Simpan kode CSS di bawah ini sebelum kode </head>

<style type='text/css'>
/* ----------------
CSS SPOILER BASIC
------------------ */
.buka-tutup {
    text-align:center;
    cursor:pointer;
}

#tkp {
  margin-top:15px;
padding:5px;
}
</style>

Langkah Kedua : Simpan kode JavaScript dibawah ini sebelum tag </body>


<script type='text/javascript'>
//<![CDATA[
$('.buka-tutup').toggle(function() {
    $(this).text('Tutup Box Spoiler!');
    $('#tkp').slideDown(800);
}, function() {
    $(this).text('Buka Lagi Box Spoier-nya!');
    $('#tkp').slideUp(100);
});
//]]>  
</script>

Perhatikan Angka 800 dan 100 pada kode di atas, itu adalah value/nilai untuk menentukan kecepatan saat box terbuka dan tertutup.

Penulisan Pada HTML

Terakhir : Pemasangan kode HTML pada area posting / widget sesuai dengan yang di inginkan!


<button class="buka-tutup">Buka Box Spoiler!</button>
<div id="tkp" style="display:none;">Ini adalah Content yang di hasilkan dari tombol yang sudah sobat klik! :)</div>

Semoga postingan Cara Membuat Spoiler di Blog ini bermanfaat untuk sobat yang membutuhkan.