Dynamic hide reveal

Question

I'm working on a blog and I have it set up so you can leave a comment on an entry. I don't like how much vertical space all the comments and the entry form use, so I would like to have a link on each entry that you click and it reveals the entry form and comments. I'm thinking a link that's like "Comments (5)". I see this all the time on other sites but I don't know how to create it myself.

This is some of the HTML for one of the entries:

<div class="comments">
<form action="foxpost.php" method="post">

<label for="name">Name</label><br>
<input id="name" name="name" type="text" /><br>
<label for="message">Comment</label><br>
<textarea class="message" id="message" name="message"></textarea><br><br>
<input type="hidden" name="post_id" value="7" />

<input type="Submit" value="Post Comment" />
</form>
<?php
displayComments(7);
?>      

</div>

The displayComments(); function is just the PHP that pulls the comments from the database.

The only thing I can think of is to change the to and use a different ID (such as "comments2","comments3", etc.) for each comments area, then use a javascript function involving document.getElementByID().style.display to alter a different CSS entry for each "commentsX" div. That just seems bloated though, so I'm wondering if there's an easier way to dynamically reveal and hide my form and php function that grabs the comments.

Answer 1

Since you asked for an easier way, I would go for jQuery, no need to assign different ids to them, you just use a class and jQuery will automatically show corresponding element like this:

$('a.comment').click(function(){
  $(this).nextAll('.form').slideDown('slow');
});

Where a.comment represents a link with class comment and .form represents a class for the element that contains your comments.

Answer 2

If it's okay to hide the whole comments div, You can just give it an ID:

<div class=comments id=comments>

and show it with plain JavaScript:

document.getElementById("comments").style.display = "block"