JSFiddle - React, Tailwind, and code Playground

by mikegmz

HTML

<div class="spoiler">
    <br />
    <input style="border-radius: 5px; background-color: green; float: right;" onclick="showSpoiler(this);" type="button" value="Voir tiny.v3-Cacher" />
    <div class="inner" style="display: none;">
        <div>
            <div id="tiny-v3">
                <iframe src="http://ekladata.com/papyrocktest.eklablog.com/perso/tinymce-v3/tinymce-v3.html" frameborder="no" scrolling="no" width="850" height="750"></iframe>
            </div>
        </div>
    </div>
</div>

CSS

/*-----spoiler en CSS-----*/
 #layer1 {
    visibility : visible;
    position : relative;
}
#layer1 a:active {
    color:red;
}
#layer2 {
    width:300px;
    border:1px solid yellowgreen;
    border-radius:10px;
    box-shadow:6px 6px 10px black;
    padding:20px;
    visibility : hidden;
    position : absolute;
}
#layer2:hover {
    background-color:red;
    color:yellow;
}

JavaScript

< script > // <![CDATA[

function showSpoiler(obj)

{

    var inner = obj.parentNode.getElementsByTagName("div")[0];

    if (inner.style.display == "none")

    inner.style.display = "";

    else inner.style.display = "none";

}

// ]]></script>