JSFiddle - React, Tailwind, and code Playground

by Andrea Scanu

HTML

<center><div align="center" class="container">
     <div style="display:none" id="close" class="title">
        Spoiler: Title
    </div>
    <div id="open" class="title">
        Spoiler: Title
    </div>
    <div id="content" class="content">$1
    </div>
</div>
</center>




<center><div align="center" class="container">
     <div style="display:none" id="close" class="title">
        Spoiler: Title
    </div>
    <div id="open" class="title">
        Spoiler: Title
    </div>
    <div id="content" class="content">$1
    </div>
</div>
</center>

CSS

.container {
    margin: 5px 20px 20px;
    width: 60%;
}
.title {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    padding: 4px;
    background: #008505 url(http://dvdimagehosting.altervista.org/images/gradientgreen.png) top left repeat-x;
    repeat-x scroll 0% 0% transparent;
    border: 1px solid #006704;
    -moz-border-radius:5px;
    color:#ffffff;
    text-shadow: -1px -1px 0px #018805, 1px 1px 2px #00de09;
    -moz-border-radius-topleft: 7px;
    -moz-border-radius-topright: 7px;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.title#open {
     -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-bottomright: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

.title:hover {
    cursor: pointer;
    background: #009706 url(http://dvdimagehosting.altervista.org/images/gradientgreenhover.png) top left repeat-x;
    border: 1px solid #007304;
    text-shadow:0 -1px #007304;
}

.content {
    border: 1px solid gray;
    border-top: none;
    padding: 4px;
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-bottomright: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    color: #6a6a6a;
    display:none;
}

JavaScript

$("#open").click(function(){
    $(this).hide();
    $("#close").show();
    $(this).next().slideDown("fast");
    $(this).next().animate({"height": "+=6px"}, 100);
    $(this).next().animate({"height": "-=6px"}, 100);
    $(this).next().animate({"height": "+=3px"}, "fast");
    $(this).next().animate({"height": "-=3px"}, "fast");
});

$("#close").click(function(){
    $(".content").slideUp("fast",function(){
        $("#close").hide();
        $("#open").show();
    });
});