In this post I want to explain Facebook like Collapsed Comments, while clicking View all Comments link it displays all the existing comments. I made a demo with jquery, ajax and php. Take a look at this live demo
Download Script 
Live DemojQuery Cookbook (Animal Guide)
Database Design
CREATE TABLE messages(
msg_id INT AUTO_INCREMENT PRIMARY KEY,
message TEXT
);
CREATE TABLE comments(
com_id INT AUTO_INCREMENT PRIMARY KEY,
comments TEXT,
msg_id_fk INT,
FOREIGN KEY(msg_id_fk) REFERENCES messages(msg_id));
);
msg_id INT AUTO_INCREMENT PRIMARY KEY,
message TEXT
);
CREATE TABLE comments(
com_id INT AUTO_INCREMENT PRIMARY KEY,
comments TEXT,
msg_id_fk INT,
FOREIGN KEY(msg_id_fk) REFERENCES messages(msg_id));
);
Javascript Code
Contains javascipt code. $('.view_comment').click(function(){} - view_comments is the class name of anchor 'View all Comment'. Using $(this).attr("id") calling main message msg_id field value.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".view_comments").click(function()
{
var ID = $(this).attr("id");
$.ajax({
type: "POST",
url: "viewajax.php",
data: "msg_id="+ ID,
cache: false,
success: function(html){
$("#view_comments"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});
return false;
});
});
</script>
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".view_comments").click(function()
{
var ID = $(this).attr("id");
$.ajax({
type: "POST",
url: "viewajax.php",
data: "msg_id="+ ID,
cache: false,
success: function(html){
$("#view_comments"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});
return false;
});
});
</script>
view.php
Contains PHP code displaying two results form the Comments table
<ol>
<li class="egg">
<?php
include("db.php");
//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id ");
$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>
<div class="comment_ui" id="view<?php echo $id; ?>">
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
</div>
<?php
}
else
{
$second_count=0;
}
?>
<div id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">
<?php
$small=mysql_query("select * from {$prefix}comments where msg_id_fk='$id' order by com_id limit $second_count,2 ");
while($rowsmall=mysql_fetch_array($small))
{
$c_id=$rowsmall['com_id'];
$comment=$rowsmall['comment'];
?>
<div class="comment_actual_text"><?php echo $comment; ?></div>
<?php } ?>
</div>
</li>
</ol>
<li class="egg">
<?php
include("db.php");
//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id ");
$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>
<div class="comment_ui" id="view<?php echo $id; ?>">
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
</div>
<?php
}
else
{
$second_count=0;
}
?>
<div id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">
<?php
$small=mysql_query("select * from {$prefix}comments where msg_id_fk='$id' order by com_id limit $second_count,2 ");
while($rowsmall=mysql_fetch_array($small))
{
$c_id=$rowsmall['com_id'];
$comment=$rowsmall['comment'];
?>
<div class="comment_actual_text"><?php echo $comment; ?></div>
<?php } ?>
</div>
</li>
</ol>
viewajax.php
Contains PHP code displaying results form the Comments table.
<?php
include("db.php");
if(isSet($_POST['msg_id']))
{
$id=$_POST['msg_id'];
$id=mysql_real_escape_string($id);
$com=mysql_query("select * from comments where msg_id_fk='$id' order by com_id");
while($r=mysql_fetch_array($com))
{
$c_id=$r['com_id'];
$comment=$r['comment'];
?>
<div class="comment_actual_text"><?php echo $comment; ?></div>
<?php } }?>
include("db.php");
if(isSet($_POST['msg_id']))
{
$id=$_POST['msg_id'];
$id=mysql_real_escape_string($id);
$com=mysql_query("select * from comments where msg_id_fk='$id' order by com_id");
while($r=mysql_fetch_array($com))
{
$c_id=$r['com_id'];
$comment=$r['comment'];
?>
<div class="comment_actual_text"><?php echo $comment; ?></div>
<?php } }?>
Nice code, but you don't escape any of the post variables. Your code is vulnerable to SQL injection.
You should use something like mysql_real_escape_string() on every user input that is referenced in your database query.
God helps those who help themselves........................................
nice toturial, can the next toturial be about the exapanding textbox that is used on facebook, i am trying to look for that, but i cnt seem to find it, the textbox expands automatically when set on focus or when you click on it, if you know what i mean
thanks brother its useful
@Anonymous - It's a tutorial. You may modify it anyway you want.
No logro que me funcione, lo he puesto aqui. ¿me podrias decir porque por favor?
like it
$comment=$rowsmall['comment'];
to
$comment=$rowsmall['comments'];
Almost 1,000,000 views, good look.
good work sir...........
thanks..........
Hey...how do you add this code to the existing Facebook_Wall_Script.php?
I have tried
and nothing!
Great code but how do you add this code to the exsisting facebook wallscript?