Question

I have a list:

 ...
 <li>
      <a href="#" class="slide"></>Click me</a>
      <div class="newsitem">
           ...some content here
      </div>
 </li>
 <li>
      <a href="#" class="slide"></>Click me</a>
      <div class="newsitem">
           ...some content here
      </div>
 </li>
 ...

I want to use slideToggle like this:

$(".slide").click(function() {
     $(".newsitem").slideToggle("fast");
     return false;
});

The thing is, is that I want the different slide classes to just slideToggle the next newsitem class. I’ve tried using .closest(), .nextSibling() and so on.

A little help with this easy (probably) problem?

Answer 1

Replace:

$(".newsitem").slideToggle("fast");

With:

$(this).next(".newsitem").slideToggle('fast');

Here‘s the documentation for the next() method:

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Here’s a working example: http://jsfiddle.net/andrewwhitaker/3DqNF/

Also, you had some invalid HTML. Here’s the corrected HTML:

<ul>
    <li>
        <a href="#" class="slide">Click me</a>
        <div class="newsitem"></div>
    </li>
    <li>
        <a href="#" class="slide">Click me</a>
        <div class="newsitem"></div>
    </li>
</ul>