Multi Spoiler

Multi Spoiler jquery Plugin

by Agiel Triono

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="separator" style="clear: both; text-align: center;">
    <a href="http://1.bp.blogspot.com/-PzouSjQooQM/VffHmN7GryI/AAAAAAAANyg/tXZZ2w6vHxI/s1600/fashion_Chelsea-Francis_169K.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-PzouSjQooQM/VffHmN7GryI/AAAAAAAANyg/tXZZ2w6vHxI/s1600/fashion_Chelsea-Francis_169K.jpg" alt="Dummy Image With Link to Itself" /></a>
</div>Clothing stores by the numbers. Why you shouldn't eat dress shop in bed. 9 ways stylists can find you the love of your life. 17 things about trends your kids don't want you to know. 16 podcasts about stylists. 15 facts about salon services that will impress your friends. What the world would be like if cheap cloths didn't exist. Will clothing stores ever rule the world? An expert interview about hairstyles. Why salon services are killing you.
<br />
<!--more-->
<div class="a-spoil" spoiler-no="2">Spoiler</div>
<div class="a-spoil-panel" spoiler-no="2">
<br />Why do people think cheap cloths are a good idea? What wikipedia can't tell you about hairstyles. Why the next 10 years of fashion collections will smash the last 10. Why fashion nails will make you question everything. The 6 best clothing website twitter feeds to follow. 9 ways hairstyles can make you rich. Why hairstyles are afraid of the truth. 12 insane (but true) things about dress shops. The 7 biggest cheap cloth blunders. Why cheap cloths are afraid of the truth.
<br />
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
    <a href="http://4.bp.blogspot.com/-_CYa4viSHPQ/VffHrbXEn5I/AAAAAAAAN0Y/_k5r7fhabI4/s1600/fashion_white-hair-flying-light-blue_069K.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0"...

CSS

@import url('https://fonts.googleapis.com/css?family=Fira+Sans');
body{font-family:'Fira Sans',sans-serif;line-height:normal}
.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',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',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',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',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',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',fontawesome;font-size:inherit;float:none;position:relative;padding:0 5px;top:0;bottom:0;left:0;right:0}
#wrapper{max-width:800px;margin:12px auto;padding:0;display:block;position:relative}
img{max-width:500px;max-height:300px;}
.separator img{max-width:500px;max-height:300px;}
h3{color:#03A9F4;font-weight:normal}
p{margin:1em;font-weight:normal}

JavaScript

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