How do I change the display property of one div to none if the display property of another div chang-CodePudding

here I am trying to hide one div if the display property of another div changed from none to block.

$(document).ready(function(){
    // Set div display to none
    $("#div2").click(function(){
        if($('#div2').is(':visible')){
            $(".div1").css("display", "none");
        }  
    });   
});

I am using this code, but as you can see it only works on click. The display property of div2 is set to none. However, it will change to the block later. I want to run this function immediately after the display property of div2 is changed from none to block. HTML code is here

<div class="div1">Some Content Here<div>
<div id="div2" style="display:none"></div>

CodePudding user response：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>display using css</title>
  </head>
  <body>
    <div class="divfirst">Hii i am div 1</div>
    <div class="divsecond">Hii i am div 2</div>

    <!-- Online CDN file -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>
      $("document").ready(function () {
        setInterval(() => {
          if ($(".divsecond").is(":visible")) {
            $(".divfirst").css("display", "none");
          } else {
            $(".divfirst").css("display", "");
          }
        }, 0);
      });
    </script>
  </body>
</html>

CodePudding user response：

Try this.

setInterval(() => {
  if ($('#div2').is(':visible')) {
    $(".div1").css("display", "none");
  } else {
    $(".div1").css("display", "");
  }
}, 0);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div2">Div2</div>
<div class="div1">Div1</div>