JavaScript Spoiler

Tabel Konten
  1. Penggunaan 
    1. Dasar 
    2. Terbuka secara Default 
    3. Modifikasi Teks pada Tombol Toggle 
    4. Mengubah Posisi Tombol 
    5. Kelas Kustom 
    6. Efek Akordion 
    7. Nonaktif 
JavaScript Spoiler
Spoiler

Ini adalah versi mentah dari plugin spoiler pada CMS Mecha. Anda bisa menerapkannya di Blogger atau di web mana saja dengan cara mengikuti langkah-langkah berikut.

Masuklah ke halaman editor HTML Template Anda. Pertama-tama salin kode di bawah ini dan letakkan di atas kode </head>:

<script>document.documentElement.className += ' spoiler-js';</script>

Setelah itu salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>:

.spoiler {
  background-color:darkslategray;
  color:white;
  padding:.15384615384615385em;
  margin:1em 0;
}

.spoiler-toggle,
.spoiler-toggle:focus,
.spoiler-toggle:hover,
.spoiler-toggle:active {
  display:block;
  margin:0;
  padding:0 1.2em 0 .6em;
  height:2em;
  font:normal normal 100%/2em Helmet,FreeSans,Sans-Serif;
  color:inherit;
  text-decoration:none;
  outline:none;
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  cursor:pointer;
}

.spoiler-toggle:before {
  content:"";
  display:block;
  float:right;
  width:0;
  height:0;
  border-width:.3076923076923077em .3076923076923077em 0;
  border-style:solid;
  border-color:white transparent transparent;
  margin:.9230769230769231em -.6em 0 0;
}

.spoiler-content {
  padding:1em;
  background-color:white;
  color:#333;
}

.spoiler-state-expanded .spoiler-toggle {padding-bottom:inherit}

.spoiler-state-expanded .spoiler-toggle:before {
  border-width:0 .3076923076923077em .3076923076923077em;
  border-color:transparent transparent white;
  margin-top:.8461538461538461em;
}

.spoiler-state-expanded .spoiler-content + .spoiler-toggle {
  padding-top:inherit;
  padding-bottom:0;
}

.spoiler-state-disabled .spoiler-toggle {
  cursor:default;
  cursor:not-allowed;
}

.spoiler-state-disabled .spoiler-toggle:before,
.spoiler-js .spoiler-state-collapsed .spoiler-content {display:none}

.spoiler-primary {background-color:steelblue}
.spoiler-success {background-color:mediumseagreen}
.spoiler-info {background-color:skyblue}
.spoiler-warning {background-color:sandybrown}
.spoiler-danger {background-color:salmon}

Terakhir, salin kode JavaScript ini dan letakkan di atas </body>:

<script>
//<![CDATA[

// http://www.dte.web.id

(function(w, d) {
  var panel = d.getElementsByClassName('spoiler');
  if (!panel) return;
  for (var i = 0, len = panel.length; i < len; ++i) {
    if (!panel[i].id) panel[i].id = 'spoiler-' + (i + 1);
  }
  function toggleSpoiler(elem, index) {
    var toggle = d.createElement('a'),
        toggleText = (elem[index].getAttribute('data-toggle-text') || '&nbsp;').split(' | '),
        togglePlacement = elem[index].getAttribute('data-toggle-placement') && elem[index].getAttribute('data-toggle-placement') !== 'bottom' ? elem[index].getAttribute('data-toggle-placement') : 'bottom';
    toggleText.push(toggleText[0]);
    toggle.className = 'spoiler-toggle';
    toggle.href = '#' + elem[index].id;
    toggle.innerHTML = toggleText[/(^| )spoiler-state-collapsed( |$)/.test(elem[index].className) ? 0 : 1];
    toggle.onclick = function() {
      var target = this.parentNode,
          isExpanded = /(^| )spoiler-state-expanded( |$)/.test(target.className),
          isConnected = target.getAttribute('data-connection');
      if (/(^| )spoiler-state-disabled( |$)/.test(target.className)) return false;
      target.className = isExpanded ? target.className.replace(/(^| )spoiler-state-expanded( |$)/, '$1spoiler-state-collapsed$2') : target.className.replace(/(^| )spoiler-state-collapsed( |$)/, '$1spoiler-state-expanded$2');
      this.innerHTML = toggleText[isExpanded ? 0 : 1];
      if (isConnected) {
        for (var i = 0, len = elem.length; i < len; ++i) {
          var isConnectedTo = elem[i].getAttribute('data-connection'),
              toggleTextSibling = (elem[i].getAttribute('data-toggle-text') || '&nbsp;').split(' | '),
              togglePlacementSibling = elem[i].getAttribute('data-toggle-placement') && elem[i].getAttribute('data-toggle-placement') !== 'bottom' ? elem[i].getAttribute('data-toggle-placement') : 'bottom';
          if (isConnectedTo && isConnected === isConnectedTo && target.id !== elem[i].id) {
            elem[i].className = elem[i].className.replace(/(^| )spoiler-state-expanded( |$)/, '$1spoiler-state-collapsed$2');
            elem[i].children[togglePlacementSibling === 'bottom' ? 1 : 0].innerHTML = toggleTextSibling[0];
          }
        }
      }
      return false;
    };
    toggle.onmousedown = false;
    elem[index].insertBefore(toggle, togglePlacement == 'bottom' ? null : elem[index].firstChild);
  }
  for (var i = 0, len = panel.length; i < len; ++i) {
    toggleSpoiler(panel, i);
  }
})(window, document);
//]]>
</script>

Klik tombol Simpan Templat.

Penggunaan 

Semua konfigurasi hanya didasarkan pada atribut-atribut di dalam HTML spoiler.

Dasar 

Sebuah spoiler sederhana dapat dibuat dengan menyisipkan kode HTML ini ke dalam posting. Pastikan Anda sedang berada pada mode HTML, dan bukannya berada pada mode Tulis:

<div class="spoiler spoiler-state-collapsed" data-toggle-text="Spoiler">
  <div class="spoiler-content">Konten di sini…</div>
</div>

Terbuka secara Default 

Ganti kelas spoiler-state-collapsed menjadi spoiler-state-expanded untuk membuat spoiler menjadi terbuka secara default:

<div class="spoiler spoiler-state-expanded" data-toggle-text="Spoiler">
  <div class="spoiler-content">Konten di sini…</div>
</div>

Modifikasi Teks pada Tombol Toggle 

Tambahkan atribut data-toggle-text untuk menambahkan teks pada tombol. Pisahkan teks tombol menjadi dua bagian dengan sebuah “ | ” untuk membuat tombol berubah status secara bergantian ketika panel spoiler terbuka dan tertutup:

<div class="spoiler spoiler-state-collapsed" data-toggle-text="Buka Spoiler | Tutup Spoiler">
  <div class="spoiler-content">Konten di sini…</div>
</div>

Mengubah Posisi Tombol 

Secara normal, tombol toggle akan ditempatkan setelah panel. Anda bisa mengubah posisinya menjadi sebelum panel dengan cara menambahkan atribut data-toggle-placement dengan nilai sebagai top:

<div class="spoiler spoiler-state-collapsed" data-toggle-placement="top">
  <div class="spoiler-content">Konten di sini…</div>
</div>

Kelas Kustom 

Kelas kustom terinspirasi dari Twitter Bootstrap:

<div class="spoiler spoiler-default spoiler-state-collapsed" data-toggle-text="Default">
  <div class="spoiler-content">Konten di sini…</div>
</div>

<div class="spoiler spoiler-primary spoiler-state-collapsed">
  <div class="spoiler-content">Konten di sini…</div>
</div>

<div class="spoiler spoiler-success spoiler-state-collapsed">
  <div class="spoiler-content">Konten di sini…</div>
</div>

<div class="spoiler spoiler-info spoiler-state-collapsed">
  <div class="spoiler-content">Konten di sini…</div>
</div>

<div class="spoiler spoiler-warning spoiler-state-collapsed">
  <div class="spoiler-content">Konten di sini…</div>
</div>

<div class="spoiler spoiler-danger spoiler-state-collapsed">
  <div class="spoiler-content">Konten di sini…</div>
</div>

Efek Akordion 

Tambahkan atribut data-connection untuk mengaitkan antara panel yang satu dengan panel yang lainnya yang juga memiliki atribut data-connection dengan nilai yang sama. Nilai bisa berupa apa saja:

<div class="spoiler spoiler-state-expanded" data-toggle-text="Panel 1" data-connection="A">
  <div class="spoiler-content">Konten panel 1.</div>
</div>

<div class="spoiler spoiler-state-collapsed" data-toggle-text="Panel 2" data-connection="A">
  <div class="spoiler-content">Konten panel 2.</div>
</div>

<div class="spoiler spoiler-state-collapsed" data-toggle-text="Panel 3" data-connection="A">
  <div class="spoiler-content">Konten panel 3.</div>
</div>

Nonaktif 

Untuk menonaktifkan spoiler, cukup tambahkan kelas spoiler-state-disabled:

<div class="spoiler spoiler-state-collapsed spoiler-state-disabled">
  <div class="spoiler-content">Konten di sini…</div>
</div>

Demo selengkapnya bisa Anda lihat di sini:

Lihat Demo

Pengguaan spoiler ini kelihatannya memang sedikit rumit jika dilihat dari segi penulisan markup HTML. Mungkin beberapa dari kalian lebih menginginkan markup yang sederhana seperti sebuah elemen <div> dengan ID spoiler-1 dan sebuah tombol dengan atribut onclick bernilai toggleSpoiler('spoiler-1'). Tapi ini adalah resiko yang akan selalu muncul pada semua alat, widget dan plugin dengan fitur yang cukup banyak. Terdapat arsitektur dan pola tersendiri di dalamnya yang tidak bisa dilepaskan maupun disederhanakan begitu saja.

25 Komentar

  • Unknown

    nilai paddingnya kenapa pake em mas ?

    apakah dengan em akan responsive atau bagaimana

  • Mirna Syifana

    keren om, berarti bisa multiple spoiler dong dalam satu post.. top

  • Game Cover

    Hi! i hope you don't mind if i post it here, but there is any way to make this functional on blogger?

    http://codepen.io/tdevine33/pen/svupq

    • Taufik Nurrohman

      If it’s just CSS and HTML, then it’s possible. Put CSS above the ]]></b:skin>, JavaScript above the </body> inside the <script> tag and HTML in your blog post or blog widget.

      But not for the progress bar if it’s related to backend request.

  • Irfin_dsyah

    wiihhh keren mas model spoilernya , ringan pula di blog ku , makasih mas

  • Unknown

    Wah gan makasih :) sangat bermanfaat. Silahkan mampir :)

  • bukualamat

    kereen banget,.. bagus untuk diterapkan ini om, makasih :-bd

  • Unknown

    woow keren banget om ... mudah2an menjadi inspirasi buat aku yang newbie :)

  • My Notes

    mantap banget artikelnya bang .. :-bc

  • DenShoim

    Alhamdulillah sudah bisa untuk menyimpelkan halaman di About Pelemsewu Shop. Tapi masih tetep coba2,pengennya label spoiler itu di atas isi spoiler kalo bisa

    • Taufik Nurrohman

      Tambahkan atribut data-toggle-placement="top" pak!

      • DenShoim

        okey om,,makasih masukannya. nanti saya coba

      • DenShoim

        alhamdulillah sudah bisa di http://pelemsewushop.blogspot.co.id/p/about.html
        nyoba naro di http://denshoim.blogspot.com ternyata gabisa, mungkin karena template ngga standar njih?

  • BKE

    Bantu saya mas,
    Saya punya code dengan Onclick tapi mau ku pasang seperti diatas tinggal kasih Class Element saja gimana mas caranya ?
    Nih codenya
    onclick="window.open(this.href, 'dofollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;"

    • Taufik Nurrohman

      (function() {
      // seleksi semua tautan dengan kelas `.pop-link`
      var pop = document.querySelectorAll('.pop-link');
      for (var i = 0, len = pop.length; i < len; ++i) {
      if (!pop[i].href) continue;
      pop[i].onclick = function() {
      window.open(this.href, 'dofollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');
      return false;
      };
      }
      })();

      Tinggal kasih kelas pop-linkhttps://jsfiddle.net/tovic/s8gmjjr4

      • BKE

        Thanks you atas bantuannya mas, nanti saya konsultasi lagi :)

        • Taufik Nurrohman

          Sebisa mungkin pertanyaannya ditulis di bawah posting-posting yang terkait dengan pertanyaannya ya mas (seperti ini), jadi Saya jawabnya juga enak, orang lain ngebacanya juga enak :-bd

          • BKE

            Sip mas saya konsultasi di artikel yang terkait saja kok :D

  • Kangray

    keren mas tutor'a :D
    rin9an buat blo9 hehe :D
    makasih
    bodorseo

  • Dmpapuaok

    Langganan aja biar bisa langsung belajar. Terima kasih untuk setiap tutornya gan.

  • Yusuf Noer Arifin

    Suka sama kotak spoilernya :)

    Mau tanya kang, untuk merubah warna judul spoiler gimana ya kang? Soalnya pas saya coba di blog saya warnanya otomatis berubah jadi warna teks tautan kang. Sudah coba utak atik tapi belum dapat solusinya.

    Makasih kang

    • Taufik Nurrohman

      Coba begini:

      .spoiler-toggle,
      .spoiler-toggle:focus,
      .spoiler-toggle:hover,
      .spoiler-toggle:active {
      …
      color:inherit !important;
      text-decoration:none !important;
      …
      }

Komentar telah ditutup.