I'm struggling with sliding a div from the bottom of the page.
Here is my JSFIDDLE
Currently, when I click on the blue box (arrow-hover), the div slides up (box-main).
However, to hide the div (box-main) again, I have to click inside the box-main div.
My goal is to hide the div when I click on the blue box (arrow-hover) again. I've tried various methods but without success.
Additionally, I used position fixed for both boxes so that when zooming in on the page, the box remains fixed and covers the rest of the page. If I use position absolute or relative, the div (box-main) is visible below the footer, which is not ideal. Is there another way to achieve this?
Here is my code:
HTML:
<div id="container">
<div id="box-main"></div>
<div id="arrow-hover"></div>
<footer></footer>
</div>
CSS:
#container
{
margin:0;
width:100%;
height:100%;
}
#box-main{
position: fixed;
left:150px;
bottom: -150px;
width: 250px;
height: 150px;
background: #000;
z-index: 100;
}
#arrow-hover{
position: fixed;
bottom: 50px;
left: 250px;
width: 50px;
height: 50px;
background: blue;
z-index: 100;
}
footer
{
width:100%;
background:green;
height:50px;
bottom:0;
left:0;
position:absolute;
z-index:500;
}
Jquery:
$('body').on('click','#arrow-hover',function(){
$('#arrow-hover').animate({
bottom: '200px'
},250);
$('#box-main').animate({
bottom: '50px'
},250);
});
$('body').on('click','#box-main',function(){
$('#arrow-hover').animate({
bottom: '50px'
},250);
$('#box-main').animate({
bottom: '-150px'
},250);
});
Additionally, I would like to add an upward arrow in the (arrow-hover) div so that when clicked, the div moves up and the arrow points downwards. When clicked again, the div should hide. Can this be achieved using JQuery, JavaScript, or CSS3?
Any assistance would be greatly appreciated. Thank you!