jQuery / Javascript - else if statement not reaching else if
<p>I'm relatively new to jQuery / javascript but I've come across what looks like a simple snag to solve, and I just can't see what's wrong. Sorry if this ends up being simple but I've searched loads but to no end. </p>

<p>I'm trying to get various divs to fade in or out depending on whether they are 'visible' or not. The divs are effectively 'pages' that I want to advance when the 'next' arrow is clicked.</p>

<p>Here's my jQuery:</p>

<pre><code>$(document).ready(function(){    
   $("#page1 &gt; div").hide();
   $("#page2 &gt; div").hide();
   $("#page3 &gt; div").hide();

   $("#page1 &gt; div").fadeIn(800);

   $("#NextArrow").click(function(){
      if($("#page1").is(":visible")){
         $("#page1 &gt; div").fadeOut(800);
         $("#page2 &gt; div").fadeIn(800);
      }
      else if($("#page2").is(":visible")){
         $("#page2 &gt; div").fadeOut(800);
         $("#page3 &gt; div").fadeIn(800);
      }
      else {
         alert("no page");
      }
   })
}) 
</code></pre>

<p>Here is the html:</p>

<pre><code>&lt;table id="MainTable" width="765" border="0" align="center"&gt;
&lt;tr&gt;
&lt;td align="left" valign="top" style="min-height:400px; padding-left:10px; padding-top:10px"&gt;
&lt;div id="page1" style="position:absolute"&gt;
   &lt;div id="p1Title"&gt;Introduction&lt;/div&gt;
   &lt;p&gt;&lt;/p&gt;
   &lt;div id="p1Detail"&gt;....detail.....&lt;/div&gt;
&lt;/div&gt;
&lt;div id="page2" style="position:absolute"&gt;
   &lt;div id="p2Title"&gt;Introduction - continued&lt;/div&gt;
   &lt;p&gt;&lt;/p&gt;
   &lt;div id="p2Detail"&gt;....detail.....&lt;/div&gt;
&lt;/div&gt;
&lt;div id="page3" style="position:absolute"&gt;
   &lt;div id="p3Title"&gt;Members&lt;/div&gt;
   &lt;p&gt;&lt;/p&gt;
   &lt;div id="p3Detail"&gt;....detail.....&lt;/div&gt;
&lt;/div&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;&lt;td align="right"&gt;&lt;div id="NextArrow"&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Here is the css for "NextArrow":</p>

<pre><code>#NextArrow
{
  width:120px;
  height:34px;
  background-image:url('NextArrow.gif');
}

#NextArrow:hover
{
  background-image:url('NextArrowHover.gif');
}
</code></pre>

<p>So here's the problem. When I click the 'NextArrow' div it fades 'page1' div out as expected and fades in 'page2' div. However, when I click it again nothing happens, not even getting the 'no page' alert.</p>
