I have two divs, top and bottom. Both divs have dynamic height, the top div will show or hide depending on a variable.

I would like to add in a sliding animation to the top div when showing or hiding, but the bottom div should stick with the top div and slide with it too.

var hide = true;
var trigger = document.getElementById("trigger");
var topdiv = document.getElementById("topdiv");

trigger.addEventListener('click', function() {
	if (hide) {
  	topdiv.classList.add('hide');
  } else {
  	topdiv.classList.remove('hide');
  }
  hide = !hide;
});

div {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
}


.top {
  background: #999;
}

.body {
  background: #555;
}

.hide {
  display: none !important;
}

<div id="topdiv" class="top hide">
<p>Top</p>
</div>
<div class="body">
<p>Body</p>
<button id="trigger">
Trigger
</button>
</div>

I have two divs, top and bottom. Both divs have dynamic height, the top div will show or hide depending on a variable.

I would like to add in a sliding animation to the top div when showing or hiding, but the bottom div should stick with the top div and slide with it too.

var hide = true;
var trigger = document.getElementById("trigger");
var topdiv = document.getElementById("topdiv");

trigger.addEventListener('click', function() {
	if (hide) {
  	topdiv.classList.add('hide');
  } else {
  	topdiv.classList.remove('hide');
  }
  hide = !hide;
});

div {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
}


.top {
  background: #999;
}

.body {
  background: #555;
}

.hide {
  display: none !important;
}

<div id="topdiv" class="top hide">
<p>Top</p>
</div>
<div class="body">
<p>Body</p>
<button id="trigger">
Trigger
</button>
</div>

I tried adding transform animations, but the effect is only applied to the top div while the bottom div remains unanimated.

@keyframes topDivAnimate {
    from {
        transform: translateY(-100%);
    }

    to {
        transform:translateY(0%);
    }
}

Help is much appreciated.

• javascript
• html
• css

Share Improve this question Follow asked Apr 23, 2019 at 11:52 jscriptenjscripten 1111 silver badge55 bronze badges 2

• So do you also want the second div to get hidden, just like the first one? – ondrejm Commented Apr 23, 2019 at 12:01
• Nope just the first one, like the example above – jscripten Commented Apr 23, 2019 at 12:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I would use CSS transition rather than animation. I've found it easiest to do by animating the lower div rather than the upper one, and changing its position so that it covers the top one (or, of course, not). See demonstration below, I've made as minimal changes as I could to the CSS and JS:

var cover = true;
var trigger = document.getElementById("trigger");
var bottomdiv = document.getElementsByClassName("body")[0];

trigger.addEventListener('click', function() {
	if (cover) {
  	bottomdiv.classList.add('cover');
  } else {
  	bottomdiv.classList.remove('cover');
  }
  cover = !cover;
});

div {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
}


.top {
  background: #999;
}

.body {
  background: #555;
  transform: translateY(0%);
  transition: transform 0.5s;
}

.cover {
  transform: translateY(-100%);
}

<div id="topdiv" class="top hide">
<p>Top</p>
</div>
<div class="body">
<p>Body</p>
<button id="trigger">
Trigger
</button>
</div>

Are you looking something like this? Then please try this:

var trigger = document.getElementById("trigger");
var topdiv = document.getElementById("topdiv");

trigger.addEventListener('click', function() {
	if ($('#topdiv').css('display') == 'none') {
  	$(topdiv).slideDown();
  } else {
  	$(topdiv).slideUp();
  }
});

div {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
}


.top {
  display: none;
  background: #999;
}

.body {
  background: #555;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="topdiv" class="top hide">
<p>Top</p>
</div>
<div class="body">
<p>Body</p>
<button id="trigger">
Trigger
</button>
</div>

Try this code and see if that's the effect you wanted. It uses the Animate.css library so you'll need to link that in your <head></head>

function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd)
}

var hide = false;
var trigger = document.getElementById("trigger");
var topdiv = document.getElementById("topdiv");

trigger.addEventListener('click', function() {
    if (!hide) {
    topdiv.classList.remove('hide');
    animateCSS('.body', 'slideInDown');
    animateCSS('#topdiv', 'slideInDown');
  } else {
    animateCSS('#topdiv', 'slideOutUp', function() {
      topdiv.classList.add('hide');
    })
    animateCSS('.body', 'slideOutUp');
  }
  hide = !hide;
});

Working Codepen demo of my solution

Here's some more explanation on how to use the Animate.css library.