title: Removing a CSS onClick
body: <p>I'm trying to make my link toggle from left to right. I'm using the code below;</p>
  
  <h2>HTML:</h2>
  
  <pre><code>$forum_threads = '
      &lt;div id="latest_threads_link"&gt;
          &lt;a href="javascript:void(0)" id="latest_threads_click"&gt;&lt;img src="images/kalachi/latest_threads.png" alt="Latest Threads" title="Click Here to see latest threads of this section."&gt;&lt;/a&gt;
          &lt;table border="0" cellspacing="'.$theme['borderwidth'].'" cellpadding="'.$theme['tablespace'].'" class="tborder" style="display: none;" id="latest_threads_show"&gt;
              '.$forum_threads_bit.'
          &lt;/table&gt;
      &lt;/div&gt;
  ';
  </code></pre>
  
  <h2>jQuery:</h2>
  
  <pre><code>jQuery(document).ready(function($){
    $('a[id^="latest_threads_click"]').on('click', function (e){
          e.preventDefault();
          $('#latest_threads_show').slideToggle();
          $('#latest_threads_click').addClass('latest_threads_link_active');
      });
  });
  </code></pre>
  
  <h2>CSS:</h2>
  
  <pre><code>#latest_threads_link{
      left:0;
      position:fixed;
      bottom:150px;
  }
  
  .latest_threads_link_active{
      left:200px;
      position:fixed;
      bottom:150px;
  }
  </code></pre>
  
  <p>I want to make it so when <code>#latest_threads_link</code> is clicked then <code>#latest_threads_show</code> toggleout from left to right and on second click on <code>#latest_threads_link</code> then the table <code>#latest_threads_show</code> hides.</p>
  
  <p>It actually does with my code but the issue is the <code>#latest_threads_link</code> remains on <code>200px</code> away from left even on second click. I want <code>#latest_threads_link</code> to go <code>left: 0</code> on second click.</p>
  
  <p>Please help!!</p>