Animate increase size of div with JQuery/CSS

Question

I have a simple site with two sections. Ideally the section at the top would load at a particular size, but then with the click of a button located at the bottom of this section, the section would increase size to fit screen. If clicked again the section would go back to its original size.

Functionality should be exactly as the one on this site:

http://www.urbandisplacement.org/map/la

I have a couple of questions:

What is the best way to accomplish this effect through JQuery/CSS?
How do I make sure the button stays fixed at the bottom of the growing/shrinking div and moves as the div does?

I've tried resetting the height of the top div when the button is clicked, using JQuery, but this neither animates nor keeps the button at the bottom of the div when it's used.

Thank you!

Answer 1

Here's a simple CSS only version:

https://jsfiddle.net/otenf0fy/

 body,#wrapper { height: 100%; } #expand { display: none; } #top { background: black; color: white; padding: 1em; position: relative; } label { background: blue; color: white; border-radius: .5em; padding: 1em; display: block; width: 5em; text-align: center; cursor: pointer; position: absolute; bottom: 1em; left: 50%; transform: translate(-2.5em,0); } #expand:checked ~ #top { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

 <body> <div id="wrapper"> <input id="expand" type="checkbox"> <div id="top"> <p> This is just a test </p> <label for="expand">Expand</label> </div> </div> </body>

Animate increase size of div with JQuery/CSS

Question

1 answers

solution1
3 2016-12-03 00:03:45

Animate increase size of div with JQuery/CSS

Question

1 answers

solution1 3 2016-12-03 00:03:45

solution1
3 2016-12-03 00:03:45