jQuery slider problems: two buttons are getting confused about the state

Question

I have built a slider that has two possible buttons: one to .toggle, this one is always visible, and then the .click one which is only visable when the slide is open so i wanted it to only close. the problem is when you open with the .toggle and close with the .click then try to re-open with the original .toggle button. it needs 2 clicks of the mouse at that point.

<script type="text/javascript">

  $(document).ready(function(){

    $(".profile_slide_btn").toggle(

     function(){
       $("#sliding_header").animate({ 
         top: "0px"
       }, 300 );
     }, 

     function(){
      $("#sliding_header").animate({ 
         top: "-600px"
       }, 300 );
  });

 $(".profile_slide_btn2").click(

     function(){
       $("#sliding_header").animate({ 
         top: "-600px"
       }, 300 );
     });
  });

</script>

Thanks for any help!!

Answer 1

I think the issue is that the toggle runs one function & then the other, so because you closed with the .click, but the toggle doesn't know that, when you click the .toggle again, it tries to close first.

Might have to change your logic to manually do the toggle instead of relying on the .toggle function.

Edit: So something like this (note this is untested & you may have issues where clicking things during the animation cause weirdness):

<script type="text/javascript">

    $(document).ready(function(){

        $(".profile_slide_btn").click(
            function(){
                if ($("#sliding_header").css("top") == "0px") {
                    hideHeader();
                } else {
                    showHeader();
                }
            });

        $(".profile_slide_btn2").click(hideHeader);

        function showHeader() {
            $("#sliding_header").animate({ top: "0px" }, 300 );
        }

        function hideHeader() {
            $("#sliding_header").animate({ top: "-600px" }, 300 );
        }
    });

</script>