Question

I’m trying to find a way to slide down a div and change the clicked link text to say “Read less” but only the div below.

<h2>Hello World</h2>
<span class="trigger"><a href="javascript:;">Read more...</a>
<div class="toggle_container">Isn't it a sunny day!</div>

<h2>Hello Again!</h2>
<span class="trigger"><a href="javascript:;">Read more...</a>
<div class="toggle_container">Today isn't so sunny.</div>

Here’s the closest I have gotten, but it does all divs when any of the anchors are clicked.

  $(document).ready(function() { 
  $('.toggle_container').hide();

  $("span.trigger a").click(function() {
    $(".toggle_container").animate({ opacity: 1.0 },200).slideToggle(500, function() {
      $("span.trigger a").text($(this).is(':visible') ? 'Read less...' : 'Read more...');
    }); 
});

}); 

Answer 1

This should work:

$(document).ready(function() {
  $('.toggle_container').hide();

  $("span.trigger a").click(function() {
    $(".toggle_container", $(this).parent()).animate({ opacity: 1.0 },200).slideToggle(500, function() {
      $("a", $(this).parent()).text($(this).is(':visible') ? 'Read less...' : 'Read more...');
    });
  });
}); 

You need to pass $(this).parent() to limit the selector to only the parent of the link you clicked. Otherwise, it’ll include all matching elements.

You are also missing the closing </span> i’ve added them below

<h2>Hello World</h2>
<span class="trigger">
  <a href="javascript:;">Read more...</a>
  <div class="toggle_container">Isn't it a sunny day!</div>
</span>
<h2>Hello Again!</h2>
<span class="trigger">
   <a href="javascript:;">Read more...</a>
  <div class="toggle_container">Today isn't so sunny.</div>
</span>

You can see the above code running on JS Fiddle