Basic Membuat Spoiler dengan Javascript & CSS

by Rian .N Herdian

HTML

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

CSS

/* ----------------
CSS SPOILER BASIC
------------------ */
.buka-tutup {
    text-align:center;
    cursor:pointer;
}

#tkp {
  margin-top:15px;
padding:5px;
}

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);
});
//]]>