Multi Spoiler Jquery

Spoiler atau bisa dibilang menyembunyikan konten sensitif atau teks panjang pada postingan sangat umum di gunakan apabila kita ingin menulis sebuah artikel pada website kita. Snipet ini dapat kita temukan pada beberapa Forum atau blog yang juga menggunakan spoiler untuk konten pada posingan mereka sebagai contoh label,tutorial,fitur,dll.

sebelumnya saya pernah memposting tutorial serupa pada Multi Spoiler Blogger

Apa Itu Multi Spoiler Jquery ?

Multi Spoiler berguna untuk membuat konten di postingan jadi semakin terorganisir dengan maksud agar tidak terlalu banyak konten yang di tampilkan , contoh nya saja seperti list gambar, kode html,javascript dll. Dan dapat di gunakan dengan lebih dari satu spoiler dalam satu postingan yang di sebut Multi Spoiler.

bagaimana cara pasang nya , mari langsung kita mulai.

pertama kita letakan kode css dalam tag <b:skin>

// Multi Spoiler CSS
.a-spoil{background:#ddd;color:#424d52;border-bottom:4px solid #f5f5f5;border-radius:3px;padding:0 3px;line-height:2;font-size:14px;font-weight:700;vertical-align:middle;cursor:pointer;transition:background 0.1s ease-in-out;user-select:none;-wekit-user-select:none;-moz-user-select:none;-ms-user-select:none}
.a-spoil:hover,.a-spoil:focus{background:#ccc;outline:none}
.a-spoil-panel{padding:0;text-align:left;background:#f1f1f1;border:0;transition:cubic-bezier(0.18,0.89,0.32,1.28) 300ms}
.a-spoil:after{content:'\f196';font-family:'Fira Sans',Roboto,fontawesome;font-size:inherit;float:none;position:relative;padding:0 5px;top:0;bottom:0;left:0;right:0}
.a-spoil:hover::after{content:'\f196  click to show';font-family:'Fira Sans',Roboto,fontawesome;font-size:inherit;float:none;position:relative;padding:0 5px;top:0;bottom:0;left:0;right:0}
.a-spoil-shower:after{content:'\f196'!important;font-family:'Fira Sans',Roboto,fontawesome;font-size:inherit;float:none;position:relative;padding:0 5px;top:0;bottom:0;left:0;right:0}
.a-spoil-hidder:after{content:'\f147'!important;font-family:'Fira Sans',Roboto,fontawesome;font-size:inherit;float:none;position:relative;padding:0 5px;top:0;bottom:0;left:0;right:0}
.a-spoil-shower:hover::after{content:'\f196  click to show'!important;font-family:'Fira Sans',Roboto,fontawesome;font-size:inherit;float:none;position:relative;padding:0 5px;top:0;bottom:0;left:0;right:0}
.a-spoil-hidder:hover::after{content:'\f147  click to hide'!important;font-family:'Fira Sans',Roboto,fontawesome;font-size:inherit;float:none;position:relative;padding:0 5px;top:0;bottom:0;left:0;right:0}

setelah itu kita taruh Jquery multi spoiler sebelum tag </body>

<script type='text/javascript'>
//<![CDATA[
// Multi Spoiler Script
! function(a) {
    "use strict";
    "function" == typeof define && define.amd ? define(["jquery"], a) : "object" == typeof exports ? module.exports = a : a(jQuery)
}(function(a) {
    "use strict";
    a.fn.spoiler = function(b) {
        var c = a.extend({
                contentClass: "a-spoil-panel",
                paddingValue: 6,
                triggerEvents: !1,
                includePadding: !0,
                buttonActiveClass: "a-spoil-active",
                spoilerVisibleClass: "a-spoil-panel-content-visible"
            }, b),
            d = "." + c.contentClass,
            e = {};
        return a(d).each(function() {
            var b = a(this);
            b.css("overflow", "hidden");
            var d = b.prop("scrollHeight");
            d = c.includePadding ? d + parseInt(c.paddingValue, 10) : d;
            var f = b.attr("spoiler-no");
            e[f] = d + "px", b.css("height", "0")
        }), a(this).on("click", function() {
            var b = a(this),
                f = b.attr("spoiler-no"),
                g = a(d + "[spoiler-no=" + f + "]"),
                h = {
                    height: e[f]
                },
                i = {
                    height: "0"
                },
                j = g.hasClass(c.spoilerVisibleClass);
            g.css(j ? i : h), c.triggerEvents && b.trigger(j ? "a-spoil-hidden" : "a-spoil-visible"), g.toggleClass(c.spoilerVisibleClass), b.toggleClass(c.buttonActiveClass)
        }), this
    }
});
$(".a-spoil").click(function() {
    if ($(this).hasClass("a-spoil-active")) {
        $(this).removeClass("a-spoil-hidder");
        $(this).addClass("a-spoil-shower")
    } else if ($(this).not("a-spoil-active")) {
        $(this).addClass("a-spoil-hidder");
        $(this).removeClass("a-spoil-shower")
    }
})
$(".a-spoil").spoiler({
    triggerEvents: !0,
    paddingValue: 20 
});
//]]>
</script>

lalu save template.

untuk penerapan pada postingan.

<div class="a-spoil" spoiler-no="1">Spoiler</div>
<div class="a-spoil-panel" spoiler-no="1">
konten disini
</div>

untuk menerapkan spoiler di postingan lebih dari satu, maka atribut spoiler-no="1" ganti dengan spoiler-no="2" untuk yang selanjutnya dan seterusnya mulai dari 1,2,3 sampai seterusnya.
contoh :

<div class="a-spoil" spoiler-no="1">Spoiler</div>
<div class="a-spoil-panel" spoiler-no="1">
konten disini
</div>

<div class="a-spoil" spoiler-no="2">Spoiler</div>
<div class="a-spoil-panel" spoiler-no="2">
konten disini
</div>

// dan seterusnya hingga yang anda inginkan

silahkan anda coba pada postingan yang berparagraph panjang.

Anda juga dapat implementasikan pada komentar blog terutama pada komentar blogger.

RESULT

Demikian postingan dari saya semoga hal ini dapat bermanfaat bagi anda semua.