jQuery remove class on .click

Question

Here is my html:

<a href="#">Read more</a>

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

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

jQuery:

$('.moreDetails p.additionalText').filter(function () {
  if ($(this).text().length > 32) {
    $(this).addClass('trim');
  }
});

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

.trim sets the paragraph to a fixed height with overflow set to hidden.

Just FYI, I'm not saying your code doesn't work, but it is a little bit of an odd use of .filter(). You probably want to use .each() instead. Or with .filter() do something more like this: $('.moreDetails p.additionalText').filter(function () { return $(this).text().length > 32; }).addClass('trim'); — user113716
– user113716, Commented Aug 13, 2010 at 15:11

Nick Craver · Accepted Answer · 2010-08-13 14:52:10Z

5

You can give that link a class, like this:

<a class="readMore" href="#">Read more</a>

then add a click handler, like this:

$("a.readMore").click(function() {
  $(this).next().find('.additionalText').removeClass('trim');
});

This works by finding the <div> relative to the <a> via .next() and .find(). If the <div> doesn't immediately follow the <a> like in your posted code this may need some tweaks, for example if there are elements in-between but they're still siblings you'd need .nextAll('.moreDetails:first') instead of .next().

answered Aug 13, 2010 at 14:52

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery remove class on .click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related