I am working on a navigation menu with four buttons and a section that contains four additional sections. The functionality I am trying to achieve is that when a navigation button is clicked, a corresponding section slides out while the previous one slides back in. However, I am facing an issue where if a button that is already selected is clicked again, I want the corresponding section to slide back in. My code might be a bit messy, so any assistance in resolving this issue would be greatly appreciated.
$(function hideDrawers() {
if($('#contentwrapper section').css('left') != '-800px'){
$('#contentwrapper section').animate({left: "-800px"}, 500);
}
Active = null;
});
$(function() {
var $one = $("#content1");
var $two = $("#content2");
var $three = $("#content3");
var $four = $("#content4");
$("#specials").click(function() {
$('#contentwrapper section').animate({left: "-800px"}, 500);
$one.animate({left: "0px"});
});
$("#lookup").click(function() {
$('#contentwrapper section').animate({left: "-800px"}, 500);
$two.animate({left: "0px"});
});
$("#recipe").click(function() {
$('#contentwrapper section').animate({left: "-800px"}, 500);
$three.animate({left: "0px"});
});
});
NAV
<nav>
<span id="logo">
<img src="img/logo.png" />
</span>
<span class="nav">
<ul>
<a href="#" id="specials" ><span class="wedge"></span><li class="special"><span></span><p>Daily Specials</p></li></a>
<a href="#" id="lookup"><span class="wedge"></span><li class="lookup"><span></span><p>Product Lookup</p></li></a>
<a href="#" id="recipe"><span class="wedge"></span><li class="recipes"><span></span><p>Recipes</p></li></a>
<a href="#" id="pharmacy"><span class="wedge"></span><li class="pharmacy"><span></span><p>Pharmacy</p></li></a>
</ul>
</span>
</nav>
Sections for Trays
<section id="contentwrapper">
<section id="content1" class="contentbg">
<div id="slides">
<div class="slides_container">
<a href="#"><img src="img/slides/image1.jpg" width:"570" height="270"></a>
</div>
<a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>
</section>
<section id="content2" class="contentbg">
</section>
<section id="content3" class="contentbg">
</section>
<section id="content4" class="contentbg">
</section>
</section>
I have realized that if a button is clicked twice, the script for the click function just repeats itself. I have tried searching for similar examples, but most results are related to slideshows. If you have any ideas on how to handle this issue, I would appreciate the help.