title: jquery and toggleClass
body: <p>I have a website with a script.
  When you click on a link, it toggle pages and the link itself is toggled as well using the toggleClass method from jquery.</p>
  
  <p>The script was working fine, but the pages were loaded on top of each other, so I've changed it a bit.
  If you click on a link for the first time, the link changes (bigger) and the page appear. The value of the link is stored in a variable (previousClick).
  Now, if I click on a second link, the previous page disappear and the new one appears. This works fine. But the previous link stays bigger. I can't find out how to revert it back to a smaller font ...</p>
  
  <p>Here is the code:</p>
  
  <pre><code>var pages = function()
  {
      var nav = $( 'ul#nav li a' );
      var previousClick = '';
  
      nav.click( function()
      {
          if (previousClick.length==0)
          {
              $( this ).parent().toggleClass( 'selected' );
              $( $( this ).attr( 'href' ) + '-page' ).toggle( 500 );
              previousClick = $( this ).attr( 'href' );
              return false;
          }
          else
          {
              $('li a [href=' + previousClick + ']').toggleClass( 'selected' );
              $( previousClick + '-page' ).toggle( 500 );
              $( this ).parent().toggleClass( 'selected' );
              $( $( this ).attr( 'href' ) + '-page' ).toggle( 500 );
              previousClick = $( this ).attr( 'href' );
              return false;   
          }
      });
  };
  
  $( window ).load( pages );
  </code></pre>
  
  <p>The css:</p>
  
  <pre><code>ul#nav li { padding: 1px; }
  ul#nav li a
  {
      font: italic normal 20px/normal 'Palatino Linotype', Georgia, Comic sans MS, Times, Serif;
      text-decoration: none;
      text-shadow: 0 1px 0 #000;
      position: relative;
      z-index: 3;
      color: #fff;
      display: block;
  }
  ul#nav li a span
  {
      font-size: 28px;
      font-family: Baskerville, Palatino, 'Palatino Linotype', Georgia, Serif;
      /*color: #3b0314;*/
      color: #FEDB00;
  }
  ul#nav li a:hover,
  ul#nav li.selected a
  {
      font-size: 200%;
  }
  </code></pre>
  
  <p>And the menu in html:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
      &lt;li id="star-top"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#société"&gt;&lt;span&gt;Qui&lt;/span&gt;sommes nous?&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#coachingé"&gt;Coaching&lt;span&gt;à&lt;/span&gt;domicile&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#entrainementé"&gt;&lt;span&gt;Plan&lt;/span&gt;d'entrainement&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#aquatiqueé"&gt;&lt;span&gt;Activités&lt;/span&gt;aquatiques&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#entreprisé"&gt;&lt;span&gt;Espace&lt;/span&gt;Entreprise&lt;/a&gt;&lt;/li&gt;
      &lt;li id="star-bot"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#contact"&gt;Contactez&lt;span&gt;nous&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#partenaire"&gt;&lt;span&gt;Nos&lt;/span&gt;partenaires&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Thanks a lot</p>