Facebook Style Toggle Comment Box with Jquery

13
This simple script shows how to implement Facebook style comment box. The comment box can be shown and hidden very easily and in a stylish way.
So check out the live demo…
Live Demo DownLoad Script


Table Structure

CREATE TABLE `webspeaks`.`comments` (
`cid` INT( 10 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`uid` INT( 10 ) NOT NULL ,
`comment` TEXT NOT NULL
) ENGINE = MYISAM

Jquery Code

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

HTML & PHP Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>WebSpeaks.in</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div class="main">
 <ol id="update" class="timeline">
  <?php
   include('../connect.php');
   $uid=1;
   $sql = mysql_query("SELECT `cid`,`comment` FROM `comments` where `uid`='$uid'");
   while($row=mysql_fetch_array($sql))
   {
   $comment=$row['comment'];
   $cid=$row['cid'];
  ?>
  <li>
   <div align="left">
    <span style="font-weight:bold;">Arvind</span>
    <span style=" color:#666666; ">
    <?php echo $comment; ?><br />
    </span>
    <div style="margin:10px 0px 2px 2px; font-size:10px; ">
     <a href="#" class="comment_button" id="<?php echo $cid; ?>">Comment</a>
    </div>
   </div>
  </li>
  <div class='panel' id="slidepanel<?php echo $cid; ?>">
   <form action="" method="post">
   <textarea style="width:390px;height:23px; border:1px solid #999999;"></textarea><br />
   <input type="submit" value=" Comment " class="comment_submit" />
   </form>
  </div>
  <?php } ?>
 </ol>
</div>
</body>
</html>

CSS Code

*{margin:0;padding:0;}
.main{
font-family:Tahoma;
width:400px;
margin-left:200px;
height:500px;
}
ol.timeline{
list-style:none;font-size:12px;
}
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
}
.comment_submit{
border:1px solid #6633FF;
background-color:#6666CC;
color:#FFFFFF;
}
.active{
color:#000000;
}

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

13 thoughts on “Facebook Style Toggle Comment Box with Jquery”

  1. I like the code but how do I use it. What do I save the first file as and what do I save the second file as. Can you please further explain the code or add some comments so that I can understand exactly what’s going on

  2. Hi, actually the first file is the javascript file, but it contains only the animation(slide) code. The ajax part has been skipped for simplicity. The second one is the main php page. You can implement the ajax call by using $.post function of jQuery.
    Plz ask if u have some problems…:)

  3. Okay, I am new to JQuery and Ajax so I need some walk through. So the JavaScript goes within the php script? I tried it on my Apache server and nothing showed up. I also have a hosting account but it didn’t really work. What I want to achieve is to allow users to comment on others posts. To my knowledge the above code will greatly help.

  4. I have a lot of articles on this blog that show how to make ajax call using jQuery and PHP. You just need to explore my a articles and you will find the real help.
    Best of luck:)

  6. I want to insert a comment box into my website,I am new to Jquery,,,,
    pls Help,

    Thanks,

Comments are closed.