Collapse each div with one function

Can some开发者_开发问答one quickly point out what I'm doing wrong and why ? My intention is to have each .learnmore class to expand their own .more-content upon click.

jQ

    $(document).ready(function(){  

      //Toggle function
      $(".learnmore").click(function(){
        $(this).next(".more-content").slideToggle(500)
        return false;
      });  
});

HTML

<div class="wrapper">
<h2>Whatsup Stack!</h2>
<img src="/image.jpg" alt="Stack Overflow" />
<p>Quick, lorem Ipsum</p>
<p><a href="#" class="learnmore">Learn More</a></p>
<div class="more-content">
  <p>Quick, lorem Ipsum</p>
  <p>Quick, lorem Ipsum</p>
</div>
<!-- eo : more-content --> 

​

Use find instead.

$(this).find(".more-content").slideToggle(500);

Since its not a child of the element you are clicking you need to traverse up to the .parent first. Then since its the next .more-content after the parent you can select it.

Live Demo

  //Toggle function
  $(".learnmore").click(function(){
    $(this).parent('p').next(".more-content").slideToggle(500);
    return false;
  });