Show more comments

Posted in: javascript by musiitwa joseph 2014-12-13 at 15:46:06

image for Show more comments Imagine you are seeing a post with 100 comments that are all shown on a page, you are not interested in the comments but you have to scroll down to see other posts. This tutorial helps to solve that by showing a specified number of comments and allowing the user to see the rest of the comments at his/her own will.


function more_comments($comments_array, $id, $less, $more, $comments_to_show){
$string = "";
if(count($comments_array) > $comments_to_show){
$string .= '<span id="reduced'.$id.'"></span><span>';
for($i=0; $i< $comments_to_show; $i++){
$string .= $comments_array[$i];
$string .= '</span>';
$string .= '<a href="#" id="all'.$id.'" class="link" onclick="all_less(''.$id.'');return false;">'.$more.'</a>';
$string .= '<span id="'.$id.'" class="more">';
$string .= '<span>';
for($i=$comments_to_show; $i<count($comments_array); $i++){
$string .= $comments_array[$i];
$string .= '</span>';
$string .= '<a href="#" id="all'.$id.'" class="link"';
$string .= 'onclick="all_less(''.$id.'');return false;">'.$less.'</a></span>';
for($i=0; $i<count($comments_array); $i++){
$string .= $comments_array[$i];

return $string;



// including the readmore function on the index page

//connecting to the database
$connect = mysqli_connect("localhost","root","","demo");

//checking if there is successful connection to database
die("Database connection failed");

<html lang="en">
<title>Read more comments</title>
<link type="text/css" rel="stylesheet" href="readmore.css">
<script type="text/javascript" src="readmore.js"></script>
<div style="text-align:center"><h2>Show more comments</h2></div>

<div class="container">
It targets showing more comments after specifying a default number of comments show, almost similar to <a href="">read more using javascript</a>

$uid =$i= 0;
//selecting the data from the database
$select = mysqli_query($connect,"select * from posts order by id desc");
while($row = mysqli_fetch_assoc($select)){//getting the posts
$id = $row['id'];
echo '<div class="post">';

echo $title = '<h3>'.$row['title'].'</h3>';
echo readmore($row['description'], "Read more", "less", 300, ++$uid);

$select_comments = mysqli_query($connect, "select * from comments where post_id = '$id' order by id desc");
$num = mysqli_num_rows($select_comments);
echo '<div class="num">Comments('.@$num.')<hr/></div>';
while($row_comment = mysqli_fetch_assoc($select_comments)){//getting the comments for a post
//the array stores all the comments
$comments{$i}[] = '<div class="quote_section">'.readmore($row_comment['details'], "Read more", "less", 100, ++$uid).'</div>';

* 1st parameter is the array of comments
* 4th parameter is the number of comments to show as the default
echo more_comments($comments{$i}, ++$uid, "Back", "Show more comments", 2);
echo '</div>';