JSFiddle - React, Tailwind, and code Playground

by mmis1000

HTML

<div class="spoiler">
    <div class="spoiler">我可以摺疊很多次歐
        <br/>也可以打很多行</div>
    <div class="spoiler">我可以摺疊很多次歐
        <br/>也可以打很多行</div>
    <div class="spoiler">我可以摺疊很多次歐
        <br/>也可以打很多行</div>
    <div class="spoiler">我可以摺疊很多次歐
        <br/>也可以打很多行<div class="spoiler">折一次不夠
        <br/>為甚麼不折兩次呢？</div></div>
</div>

CSS

.toggle {
    cursor:pointer;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding:2px;
    width:100%;
    border:1px;
    border-style:solid inset;
    margin:0px;
    margin-bottom:2px;
    background:#fafafa;
    box-shadow: -2px -2px 1px 2px #eeeeee inset;
}
.showingButton {
    margin-bottom:0px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    box-shadow: 2px 2px 1px 2px #eeeeee inset;
}
.spoiler {
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    padding:4px;
    width:100%;
    border:1px;
    border-style:solid;
    margin:0px;
    margin-bottom:2px;
    box-shadow: 2px 2px 1px 2px #eeeeee inset;
    overflow:hide;
}
.hide {
    display:none;
}
.toggle, .spoiler, .hide {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.toggle:after {
    content:"Show"
}
.showingButton:after {
    content:"Hide"
}

JavaScript

function getSpoilerBotton(element) {
    var target = $(element);

    function tab() {
        if (!target.hasClass("hide")) {
            target.addClass("hide");
            $(this).removeClass("showingButton");
        } else {
            target.removeClass("hide");
            $(this).addClass("showingButton");
        }
    }
    toggleButtom = $("<div></div>").addClass("toggle").click(tab);
    return toggleButtom;
}

function initSpoiler() {
    $(".spoiler").addClass("hide").each(function () {
        botton = getSpoilerBotton(this);
        $(this).before(botton);
    })
}

initSpoiler()