I want to hide a portion of an HTML element at the bottom of the page and then reveal the entire element by sliding it upwards upon clicking with the help of CSS3 transitions.
The expected behavior is for the part of the element extending below the page to be hidden. However, the current issue is that the page is being extended to display that part of the element.
How can I resolve this problem?
Below is my code snippet:
HTML:
<div class="closed" id="slidePanel">
<div id="slidePanel-tab">
Stuff
</div>
<div id="slidePanel-contents">
<ol>
<li>stuff</li>
<li>stuff</li>
</ol>
</div>
</div>
CSS:
#slidePanel {
background-color: #e9e9e9;
position: absolute;
bottom: 0;
left: calc(50% - 66px);
z-index: 2;
min-width: 10%;
min-height: 20%;
border: 2px solid rgba(0, 0, 0, .05);
-webkit-transition: bottom 0.5s ease-in-out;
transition: bottom 0.5s ease-in-out;
}
#slidePanel.closed {
bottom: calc(-20% + 20px);
-webkit-transition: bottom 0.5s ease-in-out;
transition: bottom 0.5s ease-in-out;
}
#slidePanel-tab {
background-color: #d0d0d0;
}
$("#slidePanel-tab").click(function (evt) {
$("#slidePanel").toggleClass("closed");
evt.preventDefault();
});
Example: https://jsfiddle.net/sd306pyr/