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

Question

Hi, 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>

Answer 2

That's because the .toggle doesn't know the slider has been closed.

1. Open with toogle : 0px
2. Close with click: -600px
3. Toggle still thinks you intend to close, so: -600px again

Use an if to know when the slider's top property is -600px and when 0, that way you know when to close and when to open.