JSFiddle - React, Tailwind, and code Playground

by naveen

HTML

<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="out"></div>

CSS

#a {
    visibility: hidden;
}
#b {
    display: none;
}
#c {
    background: #ccc;
}
#out {
    margin-top: 1em;
    border: 1px solid black;
    background-color: #ddd;
    border-radius: 2px;
    padding: 5px;
    
}
p {
    margin-bottom: 1em;
}
p:last-child {
    margin-bottom: 0;
}

JavaScript

function ChooseProd(objID) {
    var $obj = $("#" + objID);
    var isVisible = $obj.css('visibility') != 'hidden';
    var isDisplayed = $obj.is(':visible');
    var alertText = (isVisible && isDisplayed) ? "Visible element" : "Hidden Element";
    $('#out').append('<p>Element (' + objID + ') display status: ' + alertText + '</p>');
    return false;
    return false;
}

$.each(['a', 'b', 'c'], function(i, id) {
    ChooseProd(id);
});