CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2030942
user2030942

Reputation: 245

Animate increase size of div with JQuery/CSS

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:

  1. What is the best way to accomplish this effect through JQuery/CSS?
  2. 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!

Upvotes: 1

Views: 88

Answers (1)

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

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>

Upvotes: 3

Related Questions