I am looking to modify the visibility property of a different element when a specific element has its display set to none.
if ($("#first-layer").css('display') === 'none') {
$("#second-layer").removeAttr("visibility");
}#second-layer {
color: black;
background-color: red;
width: 200px;
height: 150px;
background: yellow;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
visibility: hidden; // jQuery will change this
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header>
<div id="first-layer">
<div id="header-elements">
<div id="img-rain" class="animated fadeIn" class="img"><img src="img/img.png"> </div>
<div id="typed-strings" class="text">
<span class="animated fadeInUp" id="typed"></span>
<br/>
<span class="description animated fadeIn">Your weather in one place</span>
</div>
</div>
<div id="typed-strings">
</div>
<div class="start">
<button type="button" class="btn btn-primary btn-lg responsive-width button- bg-clr animated fadeIn">Get Started</button>
</div>
</div>
<div id="second-layer">123</div>
</header>I have researched solutions online, but none of them have resolved my issue.