JSFiddle - React, Tailwind, and code Playground

by Andrea Scanu

HTML

<div id="open_close_button">
     <h3 class="toggle">
                    <img src="http://www.abload.de/img/plusavxgr.png" alt=""><a id="open" href="#">Open Spoiler</a>
                    <img src="http://www.abload.de/img/minusztbay.png" alt="" style="display: none;"><a id="close" style="display: none;" href="#">Close Spoiler</a>
                </h3>

</div>
<div id="panel" style="display:none;">
    <br />
    <center>Spoiler content</center>
    <br />
    <br />
</div>

CSS

#panel {
    background: #d9d9d9;
    color: #65a5d1;
    font-family: litios;
    font-size: 15px;
    border-bottom: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid #bdbdbd;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
#open_close_button {
    background: #d9d9d9;
    border: 1px solid #bdbdbd;
    height: 30px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
#open_close_button .toggle {
    position: relative;
    margin-left: 30px;
    height: 30px;
    line-height: 30px;
    width: 200px;
    padding: 0 20px;
}
#open_close_button .toggle img {
    position: absolute;
    top: 2px;
    left: -15px;
}
#open_close_button .toggle a {
    font-size: 16px;
    color: #000;
    text-decoration: none;
}

JavaScript

// Expand Panel
    $("#open").click(function () {
        $("div#panel").slideDown("fast");
        $("#panel").animate({
            "height": "+=10px"
        }, "fast");
        $("#panel").animate({
            "height": "-=10px"
        }, "fast");
    });

    // Collapse Panel
    $("#close").click(function () {
        $("#panel").animate({
            "height": "+=10px"
        }, "fast");
        $("#panel").animate({
            "height": "-=10px"
        }, "fast");
        $("div#panel").slideUp("fast");

    });

    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $(".toggle a").click(function () {
        $(".toggle a").toggle();
        $(".toggle a img").toggle();
    });