JSFiddle - React, Tailwind, and code Playground

by George Berkeley

HTML

<div id="rojo">
</div>

<div id="negro">
</div>

CSS

div#rojo,
    div#negro {
        display: block;
        position: relative;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
    div#rojo {background: red;}
    div#negro {background: black; display: none;}

JavaScript

var rojo  = $('#rojo').css('display');
    var negro = $('#negro').css('display');

    $( "#rojo" ).click(function() {
        if (negro === "none") {
            alert("Negro invisible.\nSe procede a ponerlo");
            $( "#negro" ).css("display", "block");
            negro = "block";
        }
        else if (negro === "block") {
            alert("Negro visible.\nSe procede a quitarlo");
            $( "#negro" ).css("display", "none");
            negro = "none";
        }
        else {
            alert("ERROR!\nnegro esta: " + negro);
        }
    });