I am trying to open specific comments related to post using Jquery

user_18586673 0
Viewed 14

I am trying to open specific Comments related to post but when i click to view more comments so all comments is opening but i want to open comments related to post not all please help me how can resolved that ? thank u

html view

<div class="comment-box">
  @foreach ($communityPosts->communityPostReply as $communityPostReplies)
  <div class="user-comment-box">
      <div class="d-flex pt-3">
         
          <div class="notification-text ms-3 w-100">
          <span class="username fw-bold">{{$communityPostReplies->users->full_name}}</span>
         
          <p class="mt-2 mb-0">{{$communityPostReplies->reply_body}}</p>
          <span class="text-muted small">{{$communityPostReplies->created_at->diffForHumans()}}</span>
          </div>
      </div>
  </div>
  @endforeach
  <a style="cursor: pointer;" class="see-more">View More Comments</a>

Here is my Jquery

  $(function(){
      $(".user-comment-box").slice(-5).show(); // select the first 5 hidden divs
      $(".see-more").click(function(e){ // click event for load more
          e.preventDefault();
          var done = $('<div class="see-more=done"></div>');
          $(".user-comment-box:hidden").slice(-5).show(); // select next 5 hidden divs and show them
          if($(".user-comment-box:hidden").length == 0){ // check if any hidden divs
              $(".see-more").replaceWith(done); // if there are none left
          }
      });
    });
jquery
1 Answers

You should limit your selectors to just the current .comment-box div.

$(function() {
  $(".user-comment-box").slice(-5).show(); // select the first 5 hidden divs
  $(".see-more").click(function(e) { // click event for load more
    e.preventDefault();
    let current_post = $(this).closest(".comment-box");
    var done = $('<div class="see-more=done"></div>');
    current_post.find(".user-comment-box:hidden").slice(-5).show(); // select next 5 hidden divs and show them
    if (current_post.find(".user-comment-box:hidden").length == 0) { // check if any hidden divs
      $(this).replaceWith(done);
    }
  });
});

user_14918950
Related