Membuat Spoiler Sederhana Dengan Jquery

Spoiler ini mempunyai satu kelebihan penting, ialah hanya memakai satu elemen tunggal. Itu artinya bahwa proses instalasi menjadi jauh lebih mudah. Elemen tombol pembuka/penutup spoiler tidak perlu kita sertakan di sini alasannya jQuery akan menyisipkan tombol tersebut secara otomatis pada masing-masing elemen target:

Lihat Demo

Pertama-tama pastikan dulu bahwa tema Anda sudah dilengkapi dengan jQuery » baca di siniSetelah itu salin instruksi ini, lalu letakkan sempurna di atas instruksi </head>:

<script> //<![CDATA[     $(function() {         $('blockquote.spoiler').hide(1000).before('<button class="sp-trigger">Lihat Konten</button>');         $('button.sp-trigger').toggle(function() {             $(this).addClass('sp-active').text('Tutup').next().slideDown(1000);         }, function() {             $(this).removeClass('sp-active').text('Lihat Konten').next().slideUp(1000);         });     }); //]]> </script>

Salin instruksi CSS ini dan letakkan di atas instruksi ]]></b:skin> atau </style>:

/*  Spoiler sederhana dengan jQuery */ blockquote.spoiler {   font:normal normal 11px/16px Verdana,Arial,Sans-Serif;   color:#666;   border:2px dashed #cec2c2;   background-color:#eee2e2;   padding:18px 20px;   -webkit-box-shadow:inset 0px 0px 7px #222;   -moz-box-shadow:inset 0px 0px 7px #222;   box-shadow:inset 0px 0px 7px #222;   margin:0px 30px 15px;   /*   overflow:auto;   height:250px;   (opsional) */ }  button.sp-trigger {   display:block;   outline:none;   cursor:pointer;   margin:20px 0px 10px 30px;   border:none;   background-color:green;   font:bold 11px Verdana,Arial,Sans-Serif;   color:white;   text-shadow:0px 1px 0px rgba(0,0,0,0.4);   padding:5px 10px;   -webkit-border-radius:15px;   -moz-border-radius:15px;   border-radius:15px;   -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);   -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);   box-shadow:0px 1px 2px rgba(0,0,0,0.4); }  button.sp-trigger.sp-active {background-color:#981515}

Klik Simpan Tema. Sekarang masuklah ke editor posting.

Untuk menciptakan spoiler, Anda cukup menambahkan elemen <blockquote> dengan atribut berupa class="spoiler":

<blockquote class="spoiler">     Konten di sini... </blockquote>

Sudah Kenal dengan Fungsi-Fungsi Ini?

Cobalah untuk memodifikasi spoiler ini dengan cara memahami beberapa fungsi di bawah :)

Sumber https://www.dte.web.id/