At the bottom of a page, I have a fixed position div element. There is another div below it, but it is hidden outside of the page margins. I am attempting to slide both divs upwards so that the bottom one becomes visible (moving out of the margin). However, the JQuery code for this is a bit confusing - using slideUp makes it go down, and I am unsure how to determine the slide length in pixels.
$(document).ready(function() {
$('#butt').click(function() {
$('#messbar').slideUp();
$('#botbar').slideUp();
});
$('#reset').click(function() {
$('#messbar').slideDown();
$('#botbar').slideDown();
});
});#container {
height: 600px;
}
#botbar {
position: fixed;
margin: auto;
height: 20px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: red;
text-align: center;
}
#messbar {
position: fixed;
margin: auto;
height: 20px;
bottom: -20px;
left: 0px;
right: 0px;
background-color: blue;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<button id="butt">Slide</button>
<button id="reset">Reset</button>
<div id="botbar">
text
</div>
<div id="messbar">
more text
</div>
</div>This is the current state. Here is the desired appearance after clicking "slide":
#container {
height: 600px;
}
#botbar {
position: fixed;
margin: auto;
height: 20px;
bottom: 20px;
left: 0px;
right: 0px;
background-color: red;
text-align: center;
}
#messbar {
position: fixed;
margin: auto;
height: 20px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: blue;
text-align: center;
}<div id="container">
<div id="botbar">
text
</div>
<div id="messbar">
more text
</div>
</div>After resetting, the divs should return to their initial position as shown in the first snippet.
When "slide" is clicked, the #botbar and #messbar should both slide up by 20px. On "reset" click, they should slide back down by 20px.
Any suggestions on how to achieve this?