CODEWITHSUNDEEP
jqueryhtmlcsshiddendisplay
Remax
Remax

Reputation: 25

Change visibility of another element if display none in jQuery

I need to change the display property of another element if a specific element has display: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; // here I have to change by jQuery
}
<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 tried solutions from the internet but they didn't work.

Upvotes: 1

Views: 4796

Answers (2)

mplungjan
mplungjan

Reputation: 177860

Your code does not do anything at the moment but you will likely have an easier time with 

if ($("#first-layer").not(":visible")) { // or .is(":hidden")
  $("#second-layer").show();
}

or 

$("#second-layer").css({visibility:visible});

since CSS declarations are not attributes

More about detection here Difference between :hidden and :not(:visible) in jQuery

Upvotes: 1

Akshay Hegde
Akshay Hegde

Reputation: 16997

Using jQuery( ":hidden" )

// if selector is none then
if($('#first-layer').is(":hidden")){

     // alter second-layers visibility
     $('#second-layer').css('visibility', 'visible');
}

Upvotes: 1

Related Questions