I want to move an absolute positioned div from the left side of the screen to -10px on button click.
Here's my attempt so far, but it's not working as expected.
Javascript/jQuery
$('.button').click(function() {
$(this).parent().find('#window').css('left', '-120%');
$(this).css('left', '-10px');
});
HTML
<div id="main-container">
<div class="popular-item">
<div class="text"></div>
<div class="button">
ENTER
</div>
</div>
<div id="window"></div>
</div>
CSS
html body div#main-container div#window {
position: absolute;
float: none;
clear: both;
display: block;
overflow: hidden;
top: 0;
left: -120%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: rgba(167,157,157,1);
background-color: #377bc2;
border-left: 10px solid #2173AD;
z-index: 10;
}
html body div#main-container {
position: relative;
float: none;
clear: both;
display: block;
overflow: hidden;
max-width: 600px;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
background-color: rgba(167,157,157,0.1);
z-index: 1;
}