jquery toggle content by header

Question

for the following HTML:

 <h1 id="t1">First Title</h1>
 <p class="contents" id="c1">First Content</p>

 <h1 id="t2">Second Title</h1>
 <p class="contents" id="c2">Second Content</p>

 <h1 id="t3">Third Title</h1>
 <p class="contents" id="c3">Third Content</p>

<!-- etc... -->

I'd like to use jquery to slideToggle the content for each specific header. Ie: clicking on id="t2", I'd like "c2" to toggle.

Thanks for your suggestions or code!

Answer 1

use class for your h1 instead, since it fits much better in your requirement..

then try this:

$('h1.h1class').click(function() { $(this).next('p.contents').slideToggle(500); });

Answer 2

$('h1').click(function(){
    $(this).next().slideToggle();
});

jsFiddle example