1

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>
Bikas
  • 13
  • 2
  • https://stackoverflow.com/questions/41368431/jquery-onclick-hide-each-siblings – Aman Sharma Oct 06 '21 at 06:33
  • The API's a bit hairy, but a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) should get you what you want if you watch for modifications to the "style" attribute. – solarshado Oct 06 '21 at 06:48
  • The answer you've accepted, involving a call to `setInterval`, is a **terrible solution to this problem**. Don't max out your user's CPU for such a simple task. Just modify which ever code changes the visibility of the first element to also change the visibility of the second element. If you can't do that, then see the linked duplicate for a simple way to watch a specific DOM element for changes with a `MutationObserver`. – user229044 Oct 06 '21 at 13:53

2 Answers2

-1
<!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>
sagar shahu
  • 11
  • 3
  • This is an extremely bad idea, and terrible advice. You're telling the browser to constantly check the state of the DOM as fast as it can, forever, even when there is no interaction with the page. You're taking a simple task and causing it to consume huge amounts of CPU for no reason, causing the performance of the whole page to degrade. – user229044 Oct 06 '21 at 13:56
-2

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>
Posandu
  • 525
  • 6
  • 18
  • This is an extremely bad idea, and terrible advice. You're telling the browser to constantly check the state of the DOM as fast as it can, forever, even when there is no interaction with the page. You're taking a simple task and causing it to consume huge amounts of CPU for no reason, causing the performance of the whole page to degrade. – user229044 Oct 06 '21 at 13:52
  • If the idea is so bad. Is there any other solution for this @meagar ? – Posandu Oct 07 '21 at 05:56
  • Yes. See the linked duplicate. – user229044 Oct 07 '21 at 16:38