Jquery slideToggle () for multiple classes

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 as follows:

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

The fact is that I want different classes to slidehave only the slideTogglefollowing class newsitem. I tried using .closest(), .nextSibling()etc.

Help a little with this easy (maybe) problem?

Answer 1

Replace:

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

WITH

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

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

Get immediately the next sibling of each element in the set of matched elements. If a selector is provided, he receives the next brother only if he matches this selector.

: http://jsfiddle.net/andrewwhitaker/3DqNF/

HTML. 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>

Answer 2

hmm :

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