I'm working on a slide-in content feature that appears from the left when clicking on the bars icon. Initially, I set it up with separate buttons for opening and closing the content by moving the page left and right. Now, I'm attempting to achieve the same functionality using just one button – open on first click and close on second. As a newcomer to Javascript/jQuery, I've been researching online and making adjustments to the code as I go along to try to get it right.
For a demonstration of the issue, you can view my JsFiddle.
Javascript:
var main = function() {
$('.icon-menu').click(function(){
$('.menu').toggle(
function(){
$('.menu').animate({
left: "0px"}, 200);
},
function(){
$('.menu').animate({
left: "600px"}, 200);
});
});
};
$(document).ready(main);
HTML:
<div class="container-fluid">
<div class="row">
<div class="icon-menu icon-close col-xs-1">
<i class="fa fa-bars fa-4x"></i>
</div>
</div>
<div class="row">
<div class="menu col-md-5">
<div class="about-text col-md-offset-1">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, quia.</p>
</div>
</div>
</div>
</div>
CSS:
body {
background-color: grey;
}
.menu {
background-color: blue;
left: -600px; /* equal to width */
height: 100%;
position: fixed;
/* width: 600px; */
}
.about-text {
color: #fff;
font-size: 15px;
text-decoration: none;
}
.icon-menu {
color: #fff;
cursor: pointer;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
z-index: 0;
background-color: red; /* marking button location */
}
.icon-menu i {
margin-right: 5px;
}
NOTE: I am aware that toggle has been deprecated in newer jQuery versions, but it was the best fit solution for my specific challenge.