Cacher dynamique révéler

Question

Je travaille sur un blog et je l'ai mis en place afin que vous puissiez laisser un commentaire sur une entrée. Je n'aime pas combien d'espace vertical tous les commentaires et le formulaire d'inscription utilisent, donc je voudrais avoir un lien sur chaque entrée que vous cliquez et il révèle le formulaire d'inscription et les commentaires. Je pense à un lien qui ressemble à "Commentaires (5)". Je le vois tout le temps sur d'autres sites mais je ne sais pas comment le créer moi-même.

Ceci est une partie de l'HTML pour l'une des entrées:

<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> 

Les displayComments(); La fonction est juste le PHP qui tire les commentaires de la base de données. La seule chose que je peux penser est de changer le et d'utiliser un ID différent (comme "comments2", "comments3", etc.) pour chaque zone de commentaires, puis utiliser une fonction javascript impliquant document.getElementByID () .style.display pour modifier une entrée CSS différente pour chaque div "commentsX". Cela semble juste pléthorique, donc je me demande s'il existe un moyen plus facile de révéler et de cacher dynamiquement ma forme et la fonction php qui saisit les commentaires.

Answer 1

Depuis que vous avez demandé un moyen plus facile, je pencherais pour jQuery, pas besoin d'assigner des ids à eux, vous utilisez simplement une classe et jQuery affichera automatiquement élément correspondant à ceci:

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

Où a.comment représente un lien avec la classe comment et .form représente une classe pour l'élément qui contient vos commentaires.

Answer 2

S'il est correct de cacher l'ensemble des commentaires div, vous pouvez simplement donner un ID:

<div class=comments id=comments> 

et le montrer avec JavaScript simple:

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