jQuery remove class on .click
<p>Here is my html:</p>

<pre><code>&lt;a href="#"&gt;Read more&lt;/a&gt;

&lt;div class="moreDetails"&gt;
  &lt;p class="additionalText"&gt;Some text help here, random length.&lt;/p&gt;
  &lt;p class="author"&gt;
    &lt;span class="bolder"&gt;&lt;a href="minidashboard.php?user_url=http://url.people/1332517"&gt;Name&lt;/a&gt;
    &lt;/span&gt;
  &lt;/p&gt;
&lt;div class="replies"&gt;
  &lt;span&gt;
    &lt;a href="topic.php?id=http://url/topics/1049198"&gt;1&lt;/a&gt;
  &lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>Im then using jQuery to add a class to the <code>.additionalText</code> div when its text is longer than 36 chars. </p>

<p>jQuery:</p>

<pre><code>$('.moreDetails p.additionalText').filter(function () {
  if ($(this).text().length &gt; 32) {
    $(this).addClass('trim');
  }
});
</code></pre>

<p>What I now want is when <code>&lt;a href="#"&gt;Read more&lt;/a&gt;</code> is clicked the class <code>.trim</code> to be removed and reveal the content.</p>

<p><code>.trim</code> sets the paragraph to a fixed height with overflow set to hidden.</p>
