Question

I have a nav with four buttons and a section with 4 sections within it.
When a nav button is clicked a “section” slides out and if another is selected the previous tray slides in and the one clicked slides out. But the problem I am having is that when a button that is already currently selected is selected again to have that tray slide back in. I know my code is a bit messy, but help would definitely be great.

$(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">
                <!--<img src="img/content-bg.png" />-->
                <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 know that I have it currently if a button is selected twice the script for function click will just repeat I tried searching for this type of example but I would usually result in slideshows and etc.

Answer 1

Figured it out.

 $("#specials").click(function() {
            if($one.css('left') != '0px') {
            $('#contentwrapper section').animate({left: "-800px"}, 500);
            $one.animate({left: "0px"});
            }
            else if($one.css('left') != '-800px') {
                $one.animate({left: "-800px"});
            }
          });