How to use CSS animation to move div from top to bottom of screen?

Question

I'm trying to get a div to expand from the top of the page to the bottom. When users click button then animation starts the div will be hidden (height 0%), till it fills its content. I tried to do it like so, but none of it seems to be working.

CSS and HTML

<div class="container">
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
</div>    

<button type="button" id="expand">Expand</button>

.container{
    background:lightblue;
    top: 0px; 
    left: 0px; 
    width: 100%; 
    display: block; 
    height:0px;
    overflow:hidden;
 }

http://jsfiddle.net/3hmvy278/

Answer 1

Give this a try. I'm using no dependencies, only some vanilla JavaScript and a CSS transition.

 document.querySelector(".myButton").addEventListener("click", () => { document.querySelector(".container").classList.toggle("start"); }); 

 .container { background: lightblue; width: 100%; height: 0; overflow: hidden; transition: 1s height ease-in-out; } .container.start { height: 100vh; } /* Ignore */ body { margin: 0; } .myButton { position: absolute; top: 0; left: 0; font-size: 100%; } 

 <div class="container"> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> </div> <button class="myButton">Toggle</button> 

Answer 2

Here i am adding class .height on click of button.

.height {
  height: 100%
}

 $(document).ready(function() { $("button").click(function() { $(".container").toggleClass("height") }); }); 

 .container { background: lightblue; top: 0px; left: 0px; width: 100%; display: block; height: 0px; overflow: hidden; } .height { height: 100% } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> </div> <button type="button" id="expand">Expand</button> 

Here I am toggling the display of div on click of button

 $(document).ready(function() { $("button").click(function() { $(".container").toggle() }); }); 

 .container { background: lightblue; top: 0px; left: 0px; width: 100%; display: block; height: 100%; overflow: hidden; display:none; } .height { height: 100% } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1> </div> <button type="button" id="expand">Expand</button>