How to toggle replies for first level comments?

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