title: jQuery sliding content and navigation active state
body: <p>I have this jQuery code that is sliding content based on what links I click and I also have a hover effect for the links,</p>
  
  <pre><code>$("#nav a").hover(function() {
      $(this).stop().animate({ paddingTop: "60px" }, 500);
  }, function() {
      $(this).stop().animate({ paddingTop: "50px" }, 500);
  });
  
  var firstTime = true;
  $("#nav a").click(function() {
      var divname = this.id;
      if (!firstTime) {
          if ($(".slid").hasClass(divname)) {
              firstTime = true;
              $(".slid").removeClass("slid").slideUp();
          } else {
              $(".slid").removeClass('slid').slideUp(500, function() {
                  $("." + divname).slideToggle().addClass("slid");
              });
          }
      } else {
          $("." + divname).slideDown().addClass("slid");
          firstTime = false;
      }
  });
  </code></pre>
  
  <p>And this is the HTML</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a id="ett"&gt;ett&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="tva"&gt;två&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="tre"&gt;tre&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="fyra"&gt;fyra&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>So my question is, how would I add a active state to the links when I click them and then when I click them again it's goes away. And when I click a different link it switched the active state.</p>
  
  <pre><code>#nav li a.active {
      background-color: #242424;
      color: #FFFFFF;
      padding-top: 60px;
  }
  </code></pre>
  
  <p>I would also have to prevent the animation on the active link so the padding doesn't go down to 50px but stays at 60px.</p>
  
  <p>Any help would be greatly appreciated!</p>