first click slide right second click slide left with jquery

hello im trying to make something like github treeslider

im new to javascript..

but heres what im working on

jQuery(document).ready(function(){
    $('#red-side-menu a').pjax({
        container: '#ajax-users-v1',
    });


    var toggle;
    if (typeof toggle != 'undefined') {
        toggle = true;
    }

    if (toggle) {
        $('body')
        .bind('start.pjax', function() { $('#ajax-users-v1').show("slide", { direction: "right" });  }开发者_开发百科)
        .bind('end.pjax',   function() {  })
        toggle = false;
    };

    if (!toggle) {
    $('body')
      .bind('start.pjax', function() { $('#ajax-users-v1').show("slide", { direction: "left" });  })
      .bind('end.pjax',   function() {  })
      toggle = true;
    }


    $('#red-edit-full a').pjax({
        container: '#ajax-users-v1',
    });     
});

well before above im useing php to get $_GET['infolder'] but it seems its not that good. the problem now that it keeps slide to left

is there a way to do this?

I think this can be simplified.

# this variable maintains state for the lifetime of the page
var direction = "right";
jQuery(document).ready(function(){
  # this whole statement only executes once
  $('#red-side-menu a').pjax({
    container: '#ajax-users-v1'
  });

  # this line executes once
  $('body')
    # this line executes once
    .bind('start.pjax', function() {
      # this line executes every time the start.pjax event reaches the body element
      $('#ajax-users-v1').show("slide", { direction: direction });  
    })
    # this line executes once
    .bind('end.pjax', function() {
      # this line executes every time the end.pjax event reaches the body element (hint: this event is raised after start.pjax is finished) 
      direction = (direction == "right" ? "left" : "right"); 
    });

  # this whole statement only executes once
  $('#red-edit-full a').pjax({
    container: '#ajax-users-v1'
  });     
});

The document ready event automatically runs only once. I have commented the code to show when each line or statement block is executed. It's really important to understand that the code inside the event handlers is the only code that is going to run after the page is finished loading.

Simply give a value to x outside the function

var x = true;
jQuery(document).ready(function(){ ...

What is happening here is that you declare var x without giving it a value. It is thus undefined, so typeof x != 'undefined' is false, so you don't end up setting x to true.

(What does x denote, by the way? Please name your variables something a human can understand...)

Then, since undefined is "falsy", the code inside if (!x) gets executed. $('body') gets bound those events, and x gets set to true.

Then the function you passed to jQuery(document).ready ends, and x goes out of scope, never to be seen again or used by anyone. So its existence was pretty pointless; you could have commented out all code except for that before var x, inside if (!x), and $('#red-edit-full a').pjax...