title: This jQuery seems like it should work
body: <p>I've trawled for hours over this piece of jQuery and I still can't get it to work.</p>
  
  <p>When I click one toggle, the rest open.</p>
  
  <p>I really need some help on this as it's for an important project.</p>
  
  <p>I'm not too good with jQuery and I've neatened it up as much as I can, but I'm really stuck.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>jQuery(function( $ )
  {
      var about = $( "#about" ),
          contact = $( "#contact" ),
          download = $( "#download" ),
          abouttoggle = $( "#abouttoggle"),
          contacttoggle = $( "#contacttoggle"),
          downloadtoggle = $( "#downloadtoggle"); 
  
      abouttoggle.click(
          function( event )
          { 
              event.preventDefault(); 
              if ( about.is( ":visible" ) )
              { 
                  about.fadeOut( 500 ); 
                  abouttoggle.css("background-color","transparent").fadeIn( 500 );
              }
              else
              {
                  about.fadeIn( 500 ); 
                  abouttoggle.css("background-color","#E0E0E0").fadeIn( 500 );
              }
  
              contact.fadeOut( 500 ); 
              contact.css("background-color","transparent").fadeIn( 500 );
              download.fadeOut( 500 ); 
              download.css("background-color","transparent").fadeIn( 500 );
          }
      );   
  
      contacttoggle.click(
          function( event )
          { 
              event.preventDefault(); 
              if ( contact.is( ":visible" ) )
              { 
                  contact.fadeOut( 500 ); 
                  contacttoggle.css("background-color","transparent").fadeIn( 500 );
              }
              else
              {
                  contact.fadeIn( 500 ); 
                  contacttoggle.css("background-color","#E0E0E0").fadeIn( 500 );
              }
  
              about.fadeOut( 500 ); 
              abouttoggle.css("background-color","transparent").fadeIn( 500 );
              download.fadeOut( 500 ); 
              download.css("background-color","transparent").fadeIn( 500 );
          }
      );   
  
      downloadtoggle.click(
          function( event )
          { 
              event.preventDefault(); 
              if ( download.is( ":visible" ) )
              { 
                  download.fadeOut( 500 ); 
                  downloadtoggle.css("background-color","transparent").fadeIn( 500 );
              }
              else
              {
                  download.fadeIn( 500 ); 
                  downloadtoggle.css("background-color","#E0E0E0").fadeIn( 500 );
              }
  
              contact.fadeOut( 500 ); 
              contact.css("background-color","transparent").fadeIn( 500 );
              about.fadeOut( 500 ); 
              about.css("background-color","transparent").fadeIn( 500 );
          }
      );   
  
  });
  </code></pre>
  
  <p>and the (relevant) html:</p>
  
  <pre><code>&lt;div align="center" class="info"&gt;
      &lt;a id="abouttoggle" href="#" class="aboutbutton"&gt;about&lt;/a&gt; | &lt;a id="contacttoggle" href="#" class="contactbutton"&gt;contact&lt;/a&gt; | &lt;a id="downloadtoggle" href="#" class="downloadbutton"&gt;downloads&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div align="center" class="about" id="about"&gt;
      about stuff
      &lt;/div&gt;
  
      &lt;div align="center" class="contact" id="contact"&gt;
      contact stuff
      &lt;/div&gt;
  
      &lt;div align="center" class="download" id="download"&gt;
      download stuff
      &lt;/div&gt;
  </code></pre>