Have content below click to fade div move up when it disappears

Question

<script type="text/javascript">
    if(!document.getElementById('Ad-Detect-js')){
        document.getElementById('RLAD').style.display='block';
    }

    var RLAD = document.getElementById('RLAD');
        document.getElementById('RLAD-wrapper').onclick = function(){
            if(!document.getElementById('Ad-Detect-js')){
                RLAD.className = RLAD.className ? 'fade' : 'fade';
            }
        }
</script>

That's the script I'm using to remove a certain div once clicked. The issue is that the content below stays in place, leaving a gap where the div resided. Is there a way to ensure that everything below is shifted up?

The question would be more clearly if you made a fiddle or a snipset — KAngel7, Dec 12 '16 at 03:43
Possible duplicate of [Transitions on the display: property](http://stackoverflow.com/questions/3331353/transitions-on-the-display-property) — Aziz, Dec 12 '16 at 04:05

score 1 · Accepted Answer · answered Dec 12 '16 at 03:46

Make sure you remove (or use display: none) the block once it's done fading out. You could make use of the transitionend event :

if (!document.getElementById('Ad-Detect-js')) {
  document.getElementById('RLAD').style.display = 'block';
}

var RLAD = document.getElementById('RLAD');
document.getElementById('RLAD-wrapper').onclick = function() {
  if (!document.getElementById('Ad-Detect-js')) {
    RLAD.className = RLAD.className ? 'fade' : 'fade';
  }
}

RLAD.addEventListener('transitionend', function() {
 this.remove();
});

#RLAD {
  width: 50px;
  height: 50px;
  background: red;
}
.fade {
  opacity: 0;
  transition: opacity .3s;
}

<button id="RLAD-wrapper">
click me
</button>
<div id="RLAD"></div>
<div>
content
</div>

Or with a timer set to the duration of the fade-out animation :

if (!document.getElementById('Ad-Detect-js')) {
  document.getElementById('RLAD').style.display = 'block';
}

var RLAD = document.getElementById('RLAD');
document.getElementById('RLAD-wrapper').onclick = function() {
  if (!document.getElementById('Ad-Detect-js')) {
    RLAD.className = RLAD.className ? 'fade' : 'fade';
    setTimeout(function() {
      RLAD.remove();
    }, 300);
  }
}

#RLAD {
  width: 50px;
  height: 50px;
  background: red;
}
.fade {
  opacity: 0;
  transition: opacity .3s;
}

<button id="RLAD-wrapper">
click me
</button>
<div id="RLAD"></div>
<div>
content
</div>

Have content below click to fade div move up when it disappears

1 Answers1