Question

Used and modified the code below. Works exactly the way I need it too, but when I use it multiple times on the same page it opens all of my excerpts at the same time. Does anyone know why, and what I need to do for it to stop and open only on the items that have been clicked?

HTML:

<article class="excerpt">
   <h2>Title</h2>
   <p>This is a sentence...</p>
   <div class="full-story">
      <p>This is the rest of the first sentence...</p>
   </div>
   <a class="excerpt-trigger" href="#">Read More</a>
</article>

jQuery:

$('.full-story').hide();

$('.excerpt-trigger').toggle(function() {
  $('.full-story').fadeIn('slow');
  $(".excerpt-trigger").removeClass("is-more");
  $(".excerpt-trigger").addClass("is-less");
  $(this).text("Less info");
}, function() {
  $('.full-story').hide('fast');
  $(".excerpt-trigger").addClass("is-more");
  $(".excerpt-trigger").removeClass("is-less");
  $(this).text("More info");
});

Sorry, left out the excerpt-trigger class. Updated.

Answer 1

A selector such as $('.full-story') will select all elements that has the class full-story. What you want is to reference the current element being clicked on by using $(this), and then selecting the very next full-story using .next('.full-story'). You can selected its children by using .children(), and a previous element using .prev().

In your case, it should go like this:

$('.excerpt-trigger').toggle(function() {
    var ref = $(this); // Caching is good.
    ref.prev('.full-story').fadeIn('slow');
   ref.removeClass("is-more").addClass("is-less").text("Less info");
}, function() {
    var ref = $(this);
    ref.prev('.full-story').hide('fast');
    ref.addClass("is-more").removeClass("is-less").text("More info");
});

Here is the documentation on .next(), .children() and .prev().

Additionally, you might want to prevent the event from bubbling when you click your <a>, so that the href="#" instruction is not carried over. Check out event.preventDefault();