Facebook like multi Toggle Comment Box with jQuery and PHP

Implement Facebook like toggle comment box for every updated wall. I had designed a simple example it contains of very simple jQuery and PHP code.

javascript code
Take a look at "#slidepanel"+I . Here 'I' element comment_button ID value 'msg_id'

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(document).ready(function()
{
$(".comment_button").click(function(){

var element = $(this);
var I = element.attr("id");

$("#slidepanel"+I).slideToggle(300);
$(this).toggleClass("active");

return false;
});
});
</script>

-->

PHP and HTML Code
Toggle div id value slidepanel+msg_id and div class panel style='display:none'

<ol id="update" class="timeline">

<?php

include('db.php');
$sql = mysql_query("SELECT msg,msg_id FROM messages");
while($row=mysql_fetch_array($sql))

{

$msg=$row['msg'];
$msg_id=$row['msg_id'];

?>

<li>

<div align="left">
<h1><?php echo $msg; ?></h1>
<a href="#" class="comment_button" id="<?php echo $msg_id; ?>">Comment</a>
</div>

</li>

<div class='panel' id="slidepanel<?php echo $msg_id; ?>">

<form action="" method="post">

<textarea style="width:390px;height:23px"></textarea><br />
<input type="submit" value=" Comment " class="comment_submit" />

</form>

</div>

<?php } ?>

</ol>

CSS code

*{margin:0;padding:0;}
ol.timeline{
list-style:none;font-size:1.2em;
}
ol.timeline li{
position:relative;
padding:.7em 0 .6em 0;
border-bottom:1px dashed #000;
line-height:1.1em;
background-color:#D3E7F5;
height:45px}
ol.timeline li:first-child{
border-top:1px dashed #000;}
.panel
{
diplay:none
}

Parthiv Patel

Bhaishri Info Solution

Sr. PHP Developer

Limdi Chowk, AT PO. Nar, Di. Anand

Nar, Gujarat

388150

India

pparthiv2412@gmail.com

7383343029

DOB: 12/24/1986