Hide and show element in sync with another element

Question

If I had two <div> elements like so:

<div class="overlay"></div>
<!-- Other content here -->
<div class="popup"></div>

When div.popup has display: block I would like div.overlay to also have display: block and likewise for display: none;

Instead of using an if statement to check whether div.popup if visible, I would like to have something like an event handler.

How would I do this using jQuery? Thanks.

_"One thing I forgot to mention I would like it to check automatically, instead of doing this with an if statement I would like something like an event handler."_ Can include how is `display` property for `.popup` is changed at `js` , `css` at Question ? What is `` at `html` ? — guest271314, Jan 10 '16 at 18:11
Maybe this can help you: http://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery — Rodrigo Leite, Jan 10 '16 at 18:28
Well? Mind showing some jQuery you currently have? P.S: why don't you simply place your popup inside overlay? — Roko C. Buljan, Jan 10 '16 at 18:31

Ibrahim Khan · Answer 1 · 2016-01-10T18:09:21.337

0

You can do it like below. Hope this will help you.

setInterval(function() { 
    if($('div.popup').is(':visible')) {
        $('div.overlay').show();
    } else {
        $('div.overlay').hide();
    }
}, 20);

edited Jan 10 '16 at 18:09

answered Jan 10 '16 at 18:04

Ibrahim Khan

20,616
7
42
55

One thing I forgot to mention I would like it to check automatically, instead of doing this with an if statement I would like something like an event handler. – Pav Sidhu Jan 10 '16 at 18:06
You can use `setInterval` to do this repeatedly after an interval. See updated answer. @PavSidhu – Ibrahim Khan Jan 10 '16 at 18:10
1

Really bad idea to run a setInterval to check for elements visibility. – Roko C. Buljan Jan 10 '16 at 18:47

Hide and show element in sync with another element

1 Answers1