Toggling a blog post loop excerpts with jQuery

Question

I'd like to reveal only post titles on my blog posts loop, and when the title is clicked -- the excerpt will appear below.

So far I got this:

$("#postTitle").click(function () {
$("#postExcerpt").toggle();

Which works one the first result only.

This, however:

$("#postTitle").click(function () {
$("#postExcerpt").next().toggle();

Doesn't work at all, and I can't figure out why.

My loop looks like this:

<div class="box">
    <div class="block">
 <p id="postTitle"><a href="#">Post Title</a></p>
 <p id="postExcerpt" style="display:none;">Post Excerpt</p>
     </div>
</div>

Your help is appreciated!

Answer 1

<script type="text/javascript">
$(document).ready(function(){
    $('#postTitle a').click(function(event){
        event.preventDefault();
        $(this).parent('#postTitle').siblings('#postExcerpt').toggle();
    });
});
</script>

Demo here: http://jquery.nodnod.net/cases/702/run

Of course, you should never reuse HTML IDs. You should use classes.