Question

I have a jquery problem, I’m a beginner at this!

I want to apply a hide/show toggle to a selection of paragraphs in a div. I have numerous similar div elements on page all with separate links to toggle.

My html is:

<div class="profile">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<div class="more">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<a href="#" title="More" class="more">More</a>
</div>
<div class="profile">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<div class="more">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<a href="#" title="More" class="more">More</a>
</div> 

How can I make it toggle each div (div class=”more”) separately on the page using jQuery? At the moment all divs hide/show at same time!

Thanks

Answer 1

@sandeep answer is correct but he has a space in the selector.

$('a.more').click(function() {
    $(this).prev('div.more').toggle('normal');
});​