Jquery inside of a php wihile loop

[corruptcity || skalman]

Hi ive got abit of code

		while($tp = $db->fetch_row($yourposts))
		{
					$date=date('G:i:s F j Y',$tp['time']);
			echo"
			<tr>
			<td>
			{$date}
			<a href='viewuser.php?u={$tp['userid']}'>".stripslashes(htmlentities($tp['username']))."</a>";
			if($tp['userid'] != $tp['profile_user'])
			{

			}
			else
			{

			}
				echo"
				".stripslashes(htmlentities($tp['text']))."
				</td>
				</tr>
				<tr>
				<td>
				<div class='comment'>Comment</div>
				</td>
				</tr>
				<tr>
				<td>
                                       //robbed this from w3schools
				<div class='panel' align='center'>
				<p>Because time is valuable, we deliver quick and easy learning.</p>
				<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
				</div>
				</td>
				</tr>";


		}
		echo"</table>";
	}
		//this is also robbed from w3schools and was placed outside of the while loop while played with the code
		echo'
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript"> 
		$(document).ready(function(){
		$(".comment").click(function(){
			$(".panel").slideToggle("slow");
		  });
		});
		</script>';

		echo"
		<style type='text/css'> 
		div.panel,div.comment
		{
		margin:0px;
		padding:5px;
		text-align:center;
		background:#e5eecc;
		border:solid 1px #c3c3c3;
		}
		div.panel
		{
		height:100px;
		display:none;
		width:90%;

		}
		</style>



		<div class='panel' align='center'>
		<p>Because time is valuable, we deliver quick and easy learning.</p>
		<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
		</div>
		";

Basically within the loop it will show a given users posts, then have a comment button which when clicked shows the div panel this works fine.

ButIi would like to know if and how its possible to only open the div panel that is directly under the comment button and not all the div panels

cheers

[Djkanna]

It is possible, though with your markup a little tricky.

As an example.

<!--There obviously would be more rows, but for the sake of clarity there's only one.-->
<tr>
   <td>
       <a href="#" title="Show Comments" class="showComments">Show Comments</a>
   </td>
   <td class="comments">
       <ul>
           <li>Comment One</li>
           <li>Comment Two</li>
           <li>Comment Three</li>
       </ul>
   </td>
</tr>

<script>
   (function ($) {
       $('.showComments').click(function (e) {
           var anchor = $(this),
               parentTr = anchor.parent('td').parent('tr');//Anchor's parent td element, the parent td element's parent tr.

           //Proceed to show/hide the comments.
           $('.comments', parentTr).show(); // Show only the .comments that exist within that tr.

           //Do something here so that clicking the anchor will then close the comments if opened or close them if not.

           e.preventDefault();
       });
   })(jQuery);
</script>

Forgive any mis-spelt words it's late, but you get the idea.