Question

I have a while loop that shows the results from a select query. Then for each result that was returned by the query, there is a link that once clicked, will show a message form. Clicking again the link, the message form will be hidden. It was made using a JQuery plugin. The problem now is, if I clicked the link, all the results will show the message form instead of showing only one, which should be from the result where the link was clicked. The code looks like this:

PHP + HTML

<?php
    $query = mysql_query(......) or die(mysql_error());
    while($row = mysql_fetch_assoc($query)){
        $id = $row['Id'];
        echo "<a class='hideMessageForm' href='#foo?id=" . $row['Id'] . "'>" . $row['Name'] . "</a>" .       
       "<div id='foo' class='showMessageForm'>
           <form action='process.php' method='post'>
              <input type='hidden' name='id' value='" .$id "'/>
              <input type='text' name='message' value=''/>
              <input type='submit' name='sendMessage' value='Send Message'/>
           </form>
       </div>";
    }
?>

JavaScript

 $(document).ready(function(){

    $(".showMessageForm").hide();
    $(".hideMessageForm").show();

    $('.hideMessageForm').click(function(){
    $(".showMessageForm").slideToggle();
    });

 });

Let me explain the thing I want to happen

For example, the query returned 3 results (result #1, #2, #3). Each result shows the link that refers to the foo div. If I clicked the link in result #1, the #2 and #3 will also popup the message form. Clicking the link from any of the 3 results will show 3 message form. I only want the result where the link was selected to be the only one to popup the message form. Thank you!

Answer 1

This is what you want. http://jsfiddle.net/qEeZf/

You are displaying / hidding all elements of the class. You just want to display or hide the next element of the link clicked. ( Seeing your PHP code, I am assuming the div will always be the next element after the link).

$(document).ready(function(){

    $(".showMessageForm").hide();
    $(".hideMessageForm").show();

    $('.hideMessageForm').click(function(){
    $(this).next(".showMessageForm").slideToggle();
    });

 });