title: How do I set a new variable value inside a javascript function?
body: <p>I have 2 navigation buttons, 'a' and 'b', where 'a' links to page 'A' and 'b' links to page 'B'. When the page loads, page 'A' is visible by default and page 'B' is hidden by default. When link 'b' is clicked, page 'A' is faded out to opacity 0 and reduced in height via the jQuery 'toggle' method, while page 'B' is faded in to opacity 1 and increased in height to full size via the jQuery 'toggle' method. When link 'a' is clicked again, the opposite happens where page 'b' is once again hidden from view and page 'a' brought back to view using the same methods.</p>
  
  <p>What I'm having trouble with is when the link to the current page being displayed is clicked again, the current page just goes blank; if page 'A' is already loaded, and I click on link 'a', the whole page goes blank, which I don't want. What I have tried is the following:</p>
  
  <pre><code>var i = "a";
  
  function a() {
    if (i != "a") {
      var i = "a";    
      jQuery(animation to hide page 'A');
      jQuery(animation to make visible page 'B');
    }
  }
  
  function b() {
    if (i != "b") {
      var i = "b";
      jQuery(animation to hide page 'B');
      jQuery(animation to make visible page 'B');
    }
  }
  </code></pre>
  
  <p>I have figured out that the value for variable 'i' that I set inside a function is only effective inside the function and that outside the function, the variable's value remains as 'a' and hence link 'a' is never clickable while link 'b' is always clickable and also results in a blank page.</p>
  
  <p>How can I write the correct javascript to do what I want it to do?</p>