title: CSS + jQuery toggle menu
body: <p>I am working on a menu using jQuery + CSS3.</p>
  
  <p>I have an up arrow on the right side of the menu and when clicked the menu slides up and the image switches to a down arrow. </p>
  
  <p>The only problem is that if you click the down arrow, it does't slide back down, even though I've provided a somewhat legit piece of code in order for it to work. </p>
  
  <p>I am new to jquery so any help would be very much appreciated!</p>
  
  <p><b>HTML:</b></p>
  
  <pre><code>&lt;nav id="tfc-new-nav"&gt;
      &lt;div class="wrapper"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="cart.html"&gt;Shopping Cart&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="login.html"&gt;My Account&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="hide-menu menu-active"&gt;&lt;/div&gt;
  &lt;/nav&gt;​
  </code></pre>
  
  <p><b>CSS:</b></p>
  
  <pre><code>.wrapper {
      display: block;
      height: 100%;
      width: 1000px;
      position: relative;
      margin: 0 auto;
  }
  
  #tfc-new-nav {
      display: block;
      height: 45px;
      width: 100%;
      background: #808E91;
      position: relative;
      top: 50px;
  }
  
  #tfc-new-nav ul {
      list-style: none;
  }
  
  #tfc-new-nav ul li {
      display: block;
      height: 45px;
      width: 10%;
      float: left;
      text-align: center;
      line-height: 45px;
  }
  
  #tfc-new-nav ul li a {
      display: block;
      color: #fff;
      text-decoration: none;
      text-transform: uppercase;
      font-family: 'Felix Titling', serif;
      cursor: pointer;
      -webkit-transition: background .3s ease-in;
      -moz-transition: background .3s ease-in;
      -ms-transition: background .3s ease-in;
      -o-transition: background .3s ease-in;
      transition: background .3s ease-in;
  }
  
  #tfc-new-nav ul li a:hover {
      background: #50798D;
  }
  
  #tfc-new-nav .hide-menu {
      position: absolute;
      top: 20px;
      right: 10px;
      cursor: pointer;
  }
  
  #tfc-new-nav .hide-menu.menu-active {
      display: block;
      background-image: url('http://upload.wikimedia.org/wikipedia/commons/6/61/Black_Up_Arrow.png');
      background-size: 100% 100%;
      height: 7px;
      width: 7px;
  }
  
  #tfc-new-nav .hide-menu.menu-hidden {
      display: block;
      background-image: url('http://www.wpclipart.com/signs_symbol/BW/direction_arrows/down_arrow.png');
      background-size: 100% 100%;
      height: 7px;
      width: 7px;
  }​
  </code></pre>
  
  <p><b>JavaScript:</b></p>
  
  <pre><code>$(document).ready(function() {
  
      $("#tfc-new-nav .hide-menu.menu-active").click(function() {
  
          $("#tfc-new-nav").animate({
  
              top: "30px"
  
          });
  
          $(this).removeClass("menu-active");
          $(this).addClass("menu-hidden");
  
          $(this).animate({
              top: "35px"
          });
  
      });
  
      $("#tfc-new-nav .hide-menu.menu-hidden").click(function() {
  
          $("#tfc-new-nav").animate({
  
              top: "95px"
  
          });
  
          $(this).removeClass("menu-hidden");
          $(this).addClass("menu-active");
  
          $(this).animate({
              top: "20px"
          });
  
      });
  
  });​
  </code></pre>
  
  <h1><a href="http://jsfiddle.net/ModernDesigner/Fma52/4/" rel="nofollow">LIVE DEMO</a></h1>