title: Jquery replacement for toggle not working
body: <p>I made a function that replaces the .toggle() so I can add more stuff into it, but it doesn't work.
  When I click on the h1 element it does turn into class="off" but it won't turn back to class="on" if I click on it again.</p>
  
  <pre><code>&lt;body&gt;
      &lt;h1 class="on"&gt;Show second word!&lt;/h1&gt;
      &lt;h2 id="submenu"&gt;hello&lt;/h2&gt;
  
  
      &lt;script&gt;
      $("#submenu").hide();
  
      $('.on').click(function()
      {
          $(this).removeClass('on');
          $(this).addClass('off');
          $('#submenu').show();
      });
  
  
      $('.off').click(function()
      {
          $(this).removeClass('on');
          $(this).addClass('off');
          $('#submenu').hide();
      });
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Jfiddle: 
  <a href="http://jsfiddle.net/T6MgH/" rel="nofollow">http://jsfiddle.net/T6MgH/</a></p>