JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Example</h1>
<div class="wrap">
    <div class="target">
        <div class="content">
            <p>Hello World</p>
        </div>
    </div>
    <div class="example">
        <p>Hidden From View</p>
    </div>
</div>
<div class="results"></div>

JavaScript

// Hide the full page wrap
$('.wrap').hide();

// Hide the part we want hidden.
$('.example').hide();

// Check if "Target" will be revealed when $('.wrap').show() is called.
var isTargetVisible = $('.target').is(':visible'); // FAILS (false)
var isTargetBlock = $('.target').css('display') == 'block'; // success (true)

// Check if "Example" will be revealed when $('.wrap').show() is called.
var isExampleVisible = $('.example').is(':visible'); // works (false)
var isExampleBlock = $('.example').css('display') == 'block'; // works (false)


var result = function(text) { $('.results').append($('<p>').text(text)); }

result('Is Target Visible: ' + isTargetVisible);
result('Is Target Block: ' + isTargetBlock);
result('Is Example Visible: ' + isExampleVisible);
result('Is Example Block: ' + isExampleBlock);