How to toggle replies for first level comments? - php

Question

I have a nested comment system with replies on my site, but comments and replies gets longer and longer.
I want to Toggle/Hide replies on page load, I added id to child comments container and tried to Hide/Toggle with ajax but didn't work.
What I tried, added a button to comment parent_id ="0" and tried with toggle and hide :
$('#buttonReplies').click(function(e){
e.preventDefault();
$(this).next("#child").fadeToggle(); // $("#child").fadeToggle(); and $("#child").hide();
});
ofcourse didnt work.
My list-comments.php :
$post_id = intval($_POST["comment_post_id"]);
$parent = intval('0');
$active = 'Y';
$sth = $pdo->prepare(
"SELECT * FROM comments
JOIN profiles ON comments.com_uid = profiles.ik_uid
WHERE comments.comment_post_id = ?
AND comments.comment_parent_id = ?
AND comments.active = ? ORDER BY comment_id DESC
");
$sth->execute([$post_id, $parent, $active]);
$output = '';
while($row = $sth->fetch()){
if($row['ik_img'] !== ''){
$image = explode('.',$row['ik_img']);
$ik_img = $image[0].".webp";
$ik = $row['ik_img'];
}else{
$ik_img = 'avatar.jpg';
$ik = 'avatar.jpg';
}
$output .= '
<div class="form-group border-bottom">
<div class="row">
<div class="col-12"><b>'.htmlspecialchars(ucfirst($row["comment_sender_name"])).'</b> dedi ki!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/small/'.$ik_img.'">
<img src="uploads/small/'.$ik.'" alt="'.htmlspecialchars($row['comment_sender_name']).'" class="img-fluid"></div>
</picture>
<div class="col-10 sttext">'.htmlspecialchars($row['comment']).'</div>
</div>
<div class="col-12 sttime"><i class="date">'.htmlspecialchars($row["comment_date"]).'</i>
<button type="button" class="btn btn-primary btn-xs reply" id="'.intval($row["comment_id"]).'">Reply <i class="fas fa-share"></i></button>
</div>
</div>
</div>
';
$output .= get_comments($pdo, intval($row["comment_id"]), intval($row["comment_post_id"]));
}
echo $output;
function get_comments($pdo, $parent_id = 0,$post_id, $active = 'Y', $marginleft = 0){
$stmt = $pdo->prepare(
"SELECT * FROM comments
JOIN profiles ON comments.com_uid = profiles.ik_uid
WHERE comments.comment_post_id = ?
AND comments.comment_parent_id = ?
AND comments.active = ? ORDER BY comment_id DESC
");
$stmt->execute([$post_id, $parent_id, $active]);
$count = $stmt->rowCount();
if($parent_id == 0){
$marginleft = 0;
$adclass = "";
}else{
$marginleft = $marginleft + 15;
$adclass = "child";
}
$output = '';
if($count > 0){
while($row = $stmt->fetch()){
if($row['ik_img'] !== ''){
$image = explode('.',$row['ik_img']);
$ik_img = $image[0].".webp";
$ik = $row['ik_img'];
}else{
$ik_img = 'avatar.jpg';
$ik = 'avatar.jpg';
}
$output .= '
<div id="'.$adclass.'" class="form-group border-bottom" style="padding-left:'.$marginleft.'px;">
<div class="row">
<div class="col-12"><b class="hide">'.htmlspecialchars(ucfirst($row["comment_sender_name"])).'</b> dedi ki!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source srcset="uploads/small/'.$ik_img.'" type="image/webp">
<img src="uploads/small/'.$ik.'" alt="'.htmlspecialchars($row['comment_sender_name']).'" class="img-fluid"></div>
</picture>
<div class="col-10 sttext">'.htmlspecialchars($row['comment']).'</div>
</div>
<div class="col-12 sttime"><i class="date">'.htmlspecialchars($row["comment_date"]).'</i>
<button type="button" class="btn btn-primary btn-xs reply" id="'.intval($row["comment_id"]).'">Reply <i class="fas fa-share"></i></button>
</div>
</div>
</div>
';
$output .= get_comments($pdo, intval($row["comment_id"]), $marginleft);
}
}
return $output;
}
My ajax in post-detail.php :
$(document).ready(function(){
$('#comment_form').submit(function(event){
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url:"modules/add_comment.php",
method:"POST",
data:form_data,
dataType:"JSON",
success:function(data)
{
if(data.error != '')
{
$('#comment_form')[0].reset();
$('#comment_message').html(data.error);
$('#comment_id').val('0');
load_comment();
}
}
})
});
load_comment();
function load_comment(){
var comment_post_id =$("#comment_post_id").val();
$("#display_comment").load("modules/list_comment.php",{
comment_post_id: comment_post_id,
});
}
$(document).on('click', '.reply', function(){
var comment_id = $(this).attr("id");
$('#comment_id').val(comment_id);
$('#comment_name').focus();
});
});
Database structer :
Note: I don't use bootstrap just jquery and css.

Answer 1

Instead of id use class selector . Then , onclick of show replies toggle all divs(child) until next parent class using .nextUntil(".parent").slideToggle();
Demo Code :
$(".parent").nextAll("div.child").slideUp() //hide all replies div
//on click of show replies
$(document).on('click', '.show_reply', function(e) {
e.preventDefault();
//check text change it
$(this).text() == "show replies" ? $(this).text("hide replies") : $(this).text("show replies")
//get closest parent div and then slide all child till next parent
$(this).closest(".parent").nextUntil(".parent").slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
<div class="col-12">
<h3 class="mgbt-xs-20 mrgt"><img alt="Yorumlar" src="uploads/images/icons/yes.png" width="32" height="32"> Total Comments (5)
</h3>
</div>
<div class="col-12">
<div id="display_comment">
<!--added class parent-->
<div class="form-group border-bottom parent">
<div class="row">
<div class="col-12"><b>User Name</b> Said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/small/EcGzDp4bniBe.webp">
<img src="https://www.kariyer.net/ik-blog/wp-content/uploads/2016/04/hr234222.jpg" alt="User Name" class="img-fluid"></picture>
</div>
<div class="col-10 sttext">How hHow to paginate search result php pdo? How to paginate search result php pdo? How to paginate search result php pdo? How h How to paginate search result php pdo?&amp;nbsp;How to paginate search r</div>
</div>
<div class="col-12 sttime"><i class="date">2021-01-01 06:04:20</i>
<button type="button" class="btn btn-primary btn-xs reply" id="40">Reply <i class="fas fa-share" aria-hidden="true"></i></button> <button type="button" class="btn btn-primary btn-xs show_reply" id="40">show replies</button>
</div>
</div>
</div>
<div class="form-group border-bottom child" style="padding-left:15px;">
<div class="row">
<div class="col-12"><b class="hide">User Name</b> Said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source srcset="uploads/small/EcGzDp4bniBe.webp" type="image/webp">
<img src="https://www.kariyer.net/ik-blog/wp-content/uploads/2016/04/hr234222.jpg" alt="User Name" class="img-fluid"></picture>
</div>
<div class="col-10 sttext">This is a test comment, just to see how everything goes.</div>
</div>
<div class="col-12 sttime"><i class="date">2021-01-01 06:06:36</i>
<button type="button" class="btn btn-primary btn-xs reply" id="42">Reply <i class="fas fa-share" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div class="form-group border-bottom child" style="padding-left:15px;">
<div class="row">
<div class="col-12"><b class="hide">User Name</b> Said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source srcset="uploads/small/EcGzDp4bniBe.webp" type="image/webp">
<img src="https://www.kariyer.net/ik-blog/wp-content/uploads/2016/04/hr234222.jpg" alt="User Name" class="img-fluid"></picture>
</div>
<div class="col-10 sttext">Load more data from database using jquery Ajax php mysql</div>
</div>
<div class="col-12 sttime"><i class="date">2021-01-01 06:05:37</i>
<button type="button" class="btn btn-primary btn-xs reply" id="41">Reply <i class="fas fa-share" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div class="form-group border-bottom parent">
<div class="row">
<div class="col-12"><b>User Name</b> Said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/small/EcGzDp4bniBe.webp">
<img src="https://www.kariyer.net/ik-blog/wp-content/uploads/2016/04/hr234222.jpg" alt="User Name" class="img-fluid"></picture>
</div>
<div class="col-10 sttext">How to paginate search result php pdo? How h How to paginate search result php pdo?&amp;amp;amp;nbsp;How to paginate search result php pdo? How to paginate search result php pdo? How to paginate searc</div>
</div>
<div class="col-12 sttime"><i class="date">2021-01-01 05:59:09</i>
<button type="button" class="btn btn-primary btn-xs reply" id="38">Reply <i class="fas fa-share" aria-hidden="true"></i></button><button type="button" class="btn btn-primary btn-xs show_reply" id="38">show replies</button>
</div>
</div>
</div>
<div class="form-group border-bottom child" style="padding-left:15px;">
<div class="row">
<div class="col-12"><b class="hide">User Name</b> Said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source srcset="uploads/small/EcGzDp4bniBe.webp" type="image/webp">
<img src="https://www.kariyer.net/ik-blog/wp-content/uploads/2016/04/hr234222.jpg" alt="User Name" class="img-fluid"></picture>
</div>
<div class="col-10 sttext">This is a test comment, just to see how everything goes.</div>
</div>
<div class="col-12 sttime"><i class="date">2021-01-01 06:06:36</i>
<button type="button" class="btn btn-primary btn-xs reply" id="42">Reply <i class="fas fa-share" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div class="form-group border-bottom parent">
<div class="row">
<div class="col-12"><b>User Name</b> Said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/small/EcGzDp4bniBe.webp">
<img src="https://www.kariyer.net/ik-blog/wp-content/uploads/2016/04/hr234222.jpg" alt="User Name" class="img-fluid"></picture>
</div>
<div class="col-10 sttext">How to paginate search result php pdo?</div>
</div>
<div class="col-12 sttime"><i class="date">2021-01-01 05:58:21</i>
<button type="button" class="btn btn-primary btn-xs reply" id="37">Reply <i class="fas fa-share" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>